Mozilla 한국 커뮤니티

-------------------------------
header
-------------------------------
|
left | content
|
|
|
|
|
|

위 세가지div 를 container 가 감싸고 있습니다.
container width 를 100%주고
left 는 80px
content 는 창크기에 따라 자동 조절 되도록 할려하는데
content 의 width 를 100% 로 주면 아래로 내려가 버리네요
content 에 border-top 을 줄려고 하는데..
어찌 안될까요?

header 와 아래 사이에 div 를 하나 더 추가해서 백그라운드 이미지 처리를 하는게 낳은지..

도움부탁드립니다^^

left는 80px이고 content는 100%이면 둘을 하쳐 100%가 넘어가서 아래로 내려가는 듯 합니다.

정확한 답변을 원하시면 코드를 써주시거나 url을 적어주세요.

----- html -----

<div id="wrap">
<div id="mainmenu"><h1>메인메뉴</h1>
</div>
<div id="submenu"><h1>서브메뉴</h1>
서브서브
</div>
<div id="content">컨텐츠</div>
</div>

----- css -----
/* wrap */
#wrap {
width: 750px;
margin: 0 auto;
height: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 2px solid #9DB9BE;
background: url(../img/하단에붙는 배경이미지.gif) bottom left no-repeat #FFF;
}

/* main menu */
#mainmenu {
width: 100%;
height: 80px;
border-top: 3px solid #9DB9BE;
border-bottom: 1px solid #9DB9BE;
}

/* sub menu */
#submenu {
float: left;
width: 200px; /*서브메뉴의 넓이겠죠? */
}

/* content */
#content {
margin-left: 200px; /* 좌측 마진값을 줍니다.. 일종의 눈속임이랄까? */
height: 800px;/*높이는 자유자재로 변경~~*/
padding: 20px 10px 20px 15px;
border-left: 1px solid #9DB9BE;
background: #FFF;
}

width 100% 를 직접 주지 않아도 늘어나게 되어있습니다.

content 에 float 값을 주시고 margin 값을 적절히 사용하시면됩니다.