HTML
<div id=”wrapper”>
<div id=”main”>
<div id=”content”>#content</div>
</div>
<div id=”left”>#left</div>
<div id=”right”>#right</div>
</div>
CSS
#wrapper {
height: 500px;
min-width: 600px;
}
#main {
height: 500px;
width: 100%;
float: left;
}
#content {
background-color: #F60;
margin-right: 200px;
margin-left: 150px;
height: 500px;
}
#left {
background-color: #09F;
float: left;
margin-left: -100%;
width: 150px;
height: 500px;
}
#right {
background-color: #0C3;
float: left;
margin-left: -200px;
width: 200px;
height: 500px;
}
抑えておく指定
3つのボックス全てにfloat: left;を指定
#mainはwidth: 100%;
#contentは左右のボックスの幅だけmarginを指定
左側のボックスはwidthとmargin-left: -100%;を指定
右側のボックスはwidthを指定し、widthと同じpx数をmargin-leftにマイナス値(=ネガティブマージン)で指定