なんとなく理解したつもりになってコーディングしているので、以前購入した書籍やらGoogle先生に聞いてみたりして書いてみました。
お約束
他に最適な方法があるかと思いますので、参照は自己責任でお願いします。HTML
<body>
<div id="wrapper">
<div id="container">
<div id="main_wrapper">
<div id="main_container">
メインコンテンツ
</div>
</div>
<div id="side_wrapper">
サイドコンテンツ
</div>
</div>
</div><!-- #wrapper -->
</body>
CSS
@charset "utf-8";
html,body{
margin:0;
padding:0;
height:100%;
background:#000;
}
#wrapper {
height: 100%;
}
/*clearfix*/
#container:after {
content:".";display: block;height:0px;clear:both;visibility:hidden;font-size:0;}
}
#container {zoom: 1;}
#container {
width:960px;
min-height: 100%;
background: url(bg.gif) #FEFEFE repeat;
}
#main_wrapper{
float:left;
width: 100%;
}
#main_container {
margin: 0 0 0 280px;
}
#side_wrapper {
float: left;
width: 250px;
margin: 0 0 0 -100%;
}
body > #container {
height: auto;
}