수다닷컴

그림에서 처럼..
레이아웃이 옆으로만 늘어지게끔 해서 레이아웃을 짤려고 하는데..
이게 쉽게 생각했다가 굉장히 복잡하네요..
ㅠㅠ

header는 position:fixed;로 width값을 고정하면 되는데
contents영역을 어떻게 해야할찌 모르겠습니다..
width값을 주고 배치해도 스크롤이 안나오고..
overflow-x:scroll;을 해도 익스에서 깨지고 파폭에선 안되네요..

도움좀 요청합니다 ㅜㅜ

아래 소스는 제가 해본건데요.. 스크롤이 전체적으로 다나왔으면하느데..어찌저찌해서 contents 부분만 스크롤을 강제로먹여놨습니다..
효율적인 방법이 모가있을까여??ㅠ
style type=text/css
#wrap{width:100%; height:auto; min-height:100%; }
#header{position:fixed; left:0; top:0; width:220px; min-height:100%; background-color:orange; }
#contents{position:fixed; width:100%; overflow-x:scroll; margin-left:220px; height:100%; min-height:761px; background-color:#fff; }
#contents .inner_cont{width:1600px;}
#contents .inner_cont .fixed{float:left; width:800px; height:100%; }
#contents .inner_cont .fixed p.box{width:200px; }
#contents .inner_cont:after{content:; display:block; clear:both;}
#contents .inner_cont .title_area{padding:0 0 10px 0; font-size:18px; font-weight:bold; border-bottom:1px solid #7BB94C;}

#header .inner_header {}
#header .inner_header h1.logo{margin:15px 0 15px 15px; width:80px; height:50px; }
#header .inner_header .gnb {width:14%:}
#header .inner_header .gnb li{width:100%; margin-bottom:7px;}
#header .inner_header .gnb li a{display:inline-block; width:190px; padding:8px 5px 8px 5px; color:#000; font-size:15px; font-weight:bold; background-color:#F7F4F1; border-bottom:1px solid #F7C9A1; text-decoration:none;}
#header .inner_header .gnb li a:focus,
#header .inner_header .gnb li a:active,
#header .inner_header .gnb li a:hover{display:inline-block; width:190px; padding:8px 5px 8px 5px; color:#000; font-size:15px; font-weight:bold; background-color:#EBF783; border-bottom:1px solid #C3CD6D; text-decoration:none;}
/style
/head
body
div id=wrap
dl class=hide
dt메뉴 바로가기/dt
dda href=#self주메뉴/a/dd
dda href=#self컨텐츠/a/dd
/dl
div id=header
div class=inner_header
h1 class=logologo/h1
h2 class=hide주메뉴/h2
ul class=gnb
lia href=#selfABOUT ME/a/li
lia href=#selfWeb Publisher?/a/li
lia href=#self웹접근성 & 웹 표준마크업?/a/li
lia href=#selfPORTFOLIO/a/li
/ul
/div!-- end : class : inner_header --
/div!-- end : id : header --
div id=contents
div class=inner_cont
h2 class=hide컨텐츠영역/h2
div class=fixed
div class=title_area
타이틀 영역
/div!-- end : class : title_area --
div
p class=box
span style=font-weight:bold;HTML/spanbr /
[HyperText Markup Language]HTML은 전자 문서의 서식을 정의하기 위해 만들어졌으며, 국제표준 SGML의 부분 집합으로 정의되었다.
HTML은 SGML에서 특히 하이퍼텍스트를 강조하여 만들어진 언어이며, ASCII 문자로 구성된 일반적인 텍스트로 구성되었다.
이 언어는 별도 컴파일러가 필요치 않으며, 웹 브라우저에서 해석이 가능한 사용하기 쉬운 언어로 각광을 받고 있다.[ webcss ]
/p
/div
/div
div class=fixed style=background-color:yellow;
div class=title_area
타이틀 영역
/div!-- end : class : title_area --
div
p테스트중입니다./p
/div
/div
/div!-- end : class : inner_cont --
/div!-- end : id : contents --
/div!-- end : id : wrap --
/body

신청하기