<div>を使っての領域設定と、cssの指定について教えてください。

質問

<div>を使っての領域設定と、cssの指定について教えてください。

WEBサイト作成中なのですが、フッター部分の作成に苦戦しております。
添付図のような配置で、<div>を使って5つの領域を設定したいのですが、うまくいきません。
HTMLでの記述と、CSSでの指定の方法を教えていただけませんか？
どうぞよろしくお願いいたします。

回答No.1

noname#119957 · ベストアンサー

<div id="wrapper">
<div class="left1">(1)</div>
<div class="yohaku"></div>
<div class="left1">(2)</div>
<div class="yohaku"></div>
<div class="left1">(3)</div>
<div id="right">
<div id="upper">(4)</div>
<div id="lower">(5)</div>
</div>
</div>

* {
margin: 0px;
padding: 0px;
}
#wrapper {
height: 200px;
width: 437px;
border: 1px solid #000000;
padding: 10px;
}
#wrapper .left1 {
float: left;
height: 200px;
width: 100px;
border: 1px solid #000000;
}
#wrapper .yohaku {
float: left;
height: 200px;
width: 10px;
}
#wrapper #right {
float: right;
height: 200px;
width: 100px;
}
#wrapper #right #upper {
height: 95px;
width: 100px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#wrapper #right #lower {
clear: both;
height: 95px;
width: 100px;
border: 1px solid #000000;
margin-top: 10px;
}

IE6では、floatしたものの、左右マージンが２倍になるバグがありますので、
float部分に、マージンは使用していません。<div class="yohaku"></div>は、そのためです。

大きさは、ピクセル指定しています。
ボーダーの太さを考慮しなければなりません。

お礼

お礼が大変に遅くなりまして失礼いたしました。
ご丁寧に、記載およびご説明してくださり、ありがとうございます。