divタグとfloatを使った3段組レイアウトの作成方法

divとfloatを使った3カラムのページを作成する方法です。
左右のサイドバーの幅は固定で、中央のコンテンツ部分はブラウザの幅によって変わる可変幅で表示します。
ここではネガティブマージンを使ってコンテンツ部分とサイドバー部分を重ねて表示させ、さらにサイドバーを前面に表示することでレイアウトを実現しています。

<html>
<head>
<style type="text/css">
#wrapper { width: 100%; float: left; margin-right: -120px;}
#center { width: 100%; float: right; margin-left: -200px; }
#left { width: 200px; float: right; background-color: red; }
#right { width: 120px; float: left; background-color: red; }
#footer { width: 100%; clear: left; }
#center>* { margin-right: 120px; margin-left: 200px; }
</style>
</head>
<body>
<div id="wrapper">
  <div id="center">
    <div>center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center</div>
  </div>
  <div id="left">
    <div>left left left left left left left left left left left left left left left left left left left left left left left left</div>
  </div>
</div>
<div id="right">
  <div>right right right right right right right right right right right right right right right right right right right right right right right right</div>
</div>
<div id="footer">
  <div>footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer</div>
</div>
</body>
</html>

コメント

タイトルとURLをコピーしました