絶対配置で３カラム&リキッドレイアウト
Dec 27
需要がありそうでなさそうな、絶対配置とリキッドレイアウトをやってみました。
HTMLソース
<div id="wrap">
<div id="leftWrap">左カラム</div>
<div id="rightWrap">右カラム</div>
<div id="centerWrap">真ん中</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
body {
text-align: center;/* IE用中央揃え */
}
#wrap {
margin: 0 auto;/* 中央揃え */
text-align: left;/* IE用中央揃えクリア */
position: relative;/* 絶対配置の基準 */
width: 70%;
}
#leftWrap,#centerWrap,#rightWrap {
position: absolute;/* 絶対配置 */
background-color: #99CCFF;/* test用 */
}
#leftWrap {
left: 0;
width: 30%;
}
#centerWrap {
left: 35%;
width: 30%;
}
#rightWrap {
left: 70%;
width: 30%;
}
おかしいところがあったら教えてください。