制作ブログ Web制作マークアップCSSpositionを利用した2段組み

positionを利用した2段組み

2段組み

レイヤーフレーム例

#wrapper{
width:○○px;
}
#container{
position:relative;
width:100%;
}
#cont1{
position:absolute;
top:0;
left:0;
width:△△px;
}
#cont2{
margin-left:△△px;
}

ポイント
#container に「width:100%」の指定を追加していること。これはIE6においてcont1、cont2にmarginやpaddingがあると表示崩れのバグ対策。
注意
#footerを#containerの下に表示させるには、#cont2が#cont1より長いことが前提。cont1のposition:relativeにすれば解決するが、xhtmlの書き方が制限されるので応用性に欠ける。

cont2の幅を可変にする場合

ちなみにcont2の幅を可変にするには#wrapperのwidthを絶対指定から相対指定にすることで実現できる

この記事の動作確認環境(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