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

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

ヘッダー・フッターのない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 で確認してみましたが私が意図したとおりに表示されています。