3 column

content

テスト用の3カラムレイアウト。sidebarの横幅は固定でcontentのみ可変幅。

html

<div id="header"></div>
<div id="container">
  <div id="wrapper">
    <div id="content"></div>
    <div id="sidebar1"></div>
  </div>
  <div id="sidebar2"></div>
</div>
<div id="footer"></div>

css

div#header {width : 100%;}
div#container {width : 100%;}
div#wrapper {
 float : left;
 margin-right : -200px;
 width : 100%;
}
div#content {
 float : right;
 margin-left : -200px;
 width : 100%;
}
div#sidebar1 {
 float : right;
 width : 200px;
}
div#sidebar2 {
 float : left;
 width : 200px;
}
div#footer {
 clear : both;
 width : 100%;
}

attention

ネガティブマージンを解消させるため、#content内へもう一つdiv要素を入れ、左右marginをsidebarの横幅分だけ確保する。

html

<div id="content">
  <div id="article"></div>
</div>

css

div#article {
 margin : 0 200px;
}