ネガティブマージンレイアウト覚書

電脳備忘録
ヘッダー・フッターのない2カラムレイアウトをネガティブマージンで構成したときのメモ。よく忘れるので...。
なんとなく理解したつもりになってコーディングしているので、以前購入した書籍やら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;
}
サンプルを用意してみました。IE8、Firefox3.6、 GoogleChrome14 で確認してみましたが私が意図したとおりに表示されています。
Newer
Older
Dark
Light
menu