0から目指すWebマスター Web制作に関する備忘録
検索

CSS

floatを利用した段組み例3

xhtmlの書き順
#cont2(#cont2in) → #cont1 → #cont3
(#cont1と#cont2の書き順はどちらでもよい)
widthの条件
#cont2を可変にする(リキッドレイアウト)

フロートの段組み例

#container{ /*背景の設定はIE6,IE7のみ有効*/
width:100%;
}

#cont1and2{
float:left;
width:100%;
margin-right:-□□px;
 /*cont3幅*/
}
#cont1{
float:left;
width:○○px; /*cont1幅*/
}
#cont2{ /*背景の設定はcont1の領域の不可視にしてしまう可能性があるので要注意*/
float:right;
width:100%; /*cont2幅をリキッドにする*/
margin-left:-○○px; /*cont1幅*/
}
#cont2in{
margin-right:□□px; /*cont3幅*/
margin-left:○○px; /*cont1幅*/
}
#cont3{
float:right;
width:□□px;/*cont3幅*/
}

ポイントは「負」のmarginと「width:100%;」を駆使すること。

  1. 後続のボックス「b」にスペースを与えるため、ボックス「a」のmarignに負の値を設定する。
  2. ただ、これだとボックス「a」とボックス「b」が重なっているだけ。
  3. そこで、marginに正の値を設定した新たなボックス「c」を「a」内に用意する。

c *{
margin-right:(bのwidth)px;
}
c * *{
margin-right:0(初期値);
}

フロートの段組み例

確認事項

floatの使用上の注意

この記事の動作確認環境(2007年12月14日追加)

Windows XP
IE7 IE6 Firefox2.x Opera9.x Netscape7.1
Mac OS 10.4
Safari3 IE5.2 Firefox2.x Opera9.x Netscape7.1

xml宣言

バージョン
1.0

html宣言

バージョン
xhtml1.0 strict
公開識別子
-//W3C//DTD XHTML 1.0 Strict//EN
システム識別子
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd