- 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%;」を駆使すること。
- 後続のボックス「b」にスペースを与えるため、ボックス「a」のmarignに負の値を設定する。
- ただ、これだとボックス「a」とボックス「b」が重なっているだけ。
- そこで、marginに正の値を設定した新たなボックス「c」を「a」内に用意する。
c *{
margin-right:（bのwidth）px;
}
c * *{
margin-right:0（初期値）;
}
確認事項
この記事の動作確認環境（2007年12月14日追加）
| IE7 | IE6 | Firefox2.x | Opera9.x | Netscape7.1 |
|---|---|---|---|---|
| ○ | ○ | ○ | ○ | ○ |
| 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