‘CSS’ カテゴリーのアーカイブ

divを使った2段組レイアウトの作り方(ダブルフロート)

2008年5月31日 土曜日

ダブルフロート方式でのdivを使った2段組レイアウトの作り方。

<div id=”container”>
<div id=”content”>
</div>
<div id=”sidebar”>
</div>
</div>

のようなHtmlを作り下記のようなCSSを適用。

div#container{
width:100%;
}
div#content {
width:70%;
float:right;
}
div#sidebar {
width: 30%;
float:left
}

これでダブルフロートによる左サイドバーのレイアウトになる。

右サイドバーの場合はfloatのleftとrightを入れ替える。

以上、web標準の教科書より。