›November 28, 2003

3カラム化完了

Category: Movable Type / 0 Comments: Post / View / 0 TrackBack

MSM-03C: 表示の崩れない3段カラム
このサイトを参考というかそのままパクって、IEでも表示の崩れなさそうな3カラム化ができたと思う。

indexはこんな感じ。

<div id="banner">タイトル</div>
<div id="inbox">
<div id="warp">
<div id="content">真ん中</div>
<div id="sidemenu">左</div>
</div>
<div id="links">右</div>
</div>

特徴は入れ子にしてfloatで流し込むところだね。
スタイルシートはこんなの。

#inbox {
width: 780px;
margin-right:auto;
margin-left: auto;
}

#warp {
float: left;
width: 580px;
}

#content {
z-index: 3;
float: right;
width: 400px;
background:#FFF;
color:#000;
}

#sidemenu {
z-index:1;
float: right;
width: 160px;
background:#FFF;
color:#000;
}

#links {
z-index:2;
float: right;
width: 160px;
background:#FFF;
color:#000;
}

これで家の環境では崩れなくなったけど、どうかな?

Comments
Post a comment












Remember personal info?