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

positionを利用した3段組み

3段組み

レイヤーフレーム例

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

注意
#footerを#containerの下に表示させるには、#cont2が#cont1,#cont3より長いことが前提。

補足

ちなみに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