css div 가변 문의
본문
레이아웃을 짜고 있습니다
<--------------------- wrap 100%-------------------------->
<===========wrap_s 100%===================================>
max-width : 1600px
<---1번 고정----><--------2번 가변-----><-----3번 가변 ----->
포지션 fixed로 가변 가변
width : 320px max-width : 800px max-width : 430px
현재 붙이기 까진 햇는데... 3번이 밑으로 떨어져버리고
사이즈가 정확히 나오지 않네용... 맥스를 주면 가변이 정확히 되지 않는것 같아서 어떻게
해야 될지 모르겠습니다 이틀째 고민이네요
소스코드 남겨봅니다
<div id="wrap">
<div id="wrap_s">
<div id="menu">
</div>
<div id="cont_main">
</div>
<div id="cont_sub">
</div>
</div>
</div>
------------ css -------
*
{
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#wrap
{
margin: 0;
padding: 0;
width: 100%;
height:1000px;
}
#wrap_s
{
max-width:2000px;
}
#menu
{
width:320px;
height:800px;
background-color:#dff0d8;
position:fixed;
float:left;
}
#cont_main
{
width:50%;
max-width:850px;
height:1700px;
background-color:#C6C;
float:left;
margin-left:320px;
}
#cont_sub
{
width:26%;
max-width:430px;
min-width:300px;
height:1200px;
background-color:#F60;
float:left;
}
답변 1
너비 = (width + margin + padding + border) 두께 입니다.
너비 계산할 때 참고하세요.
위 붉은색 부분을 제외하고 너비를 잡으려면,
box-sizing:border-box 속성을 넣어주셔야 하는데,
이 속성이 익스 하위에선 잘 먹히는지 잘 모르겠네요.
