リキッドレイアウトの作成
作成の際に使用したCSS
@charset "utf-8"; /* reset */ html,body,div,h1,h2,p,ul,li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } /* body */ body { background: #FFF; font-size: 16px; } /* layout */ #container { width: 100%; margin: 0 auto; overflow: hidden; } #header { background: url(gradation.jpg) repeat-x left top; height: 200px; margin-bottom: 30px; } #content { float: left; width: 100%; margin-bottom: 30px; } #sidebar { float: right; width: 200px; margin-bottom: 30px; } #footer { clear: both; }</span>
#contentの幅が100%(横幅全体)なので#sidebarはカラム落ちしてしまいます。
なので#containerの右側に#sidebar分の余白を作ります。
#content { float: left; width: 100%; margin-bottom: 30px; margin-right: -200px; }
すると#contentに重なるので最後に、#contentを div で囲み右側に余白を作ります。
最終形
@charset "utf-8"; /* reset */ html,body,div,h1,h2,p,ul,li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } /* body */ body { background: #FFF; font-size: 16px; } /* layout */ #container { width: 100%; margin: 0 auto; overflow: hidden; } #header { background: url(gradation.jpg) repeat-x left top; height: 200px; margin-bottom: 30px; } #content { float: left; width: 100%; margin-bottom: 30px; margin-right: -200px; } #content .inner { margin-right: 230px; } #sidebar { float: right; width: 200px; margin-bottom: 30px; } #footer { clear: both; }
これで横幅が100%のままなので、ブラウザ画面に合わせて変化します。