float指定したボックスを含むボックスの背景も出してやんよ!!!

---

今更感が否めない内容ですが、ふとこの状況になった際、不覚にもてこずってしまったので・・・

float指定した多重ボックスの背景を出す

HTMLの記述（非対応）

<div id="main_box">
<div id="box_left">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
 </div>
 <div id="box_right">
<dl>
<dt>1</dt>
<dd>2</dd>
</dl>
 </div>
</div>

CSSの記述（非対応）

#main_box {
 margin:10px;
 width:220px;
 background:#000;
 color:#FFFFFF;
 font-size:16px;
 font-weight:bold;
 text-align:center;
}

#box_left {
 width:100px;
 float:left;
 background:#FF0000;
}

#box_right {
 width:100px;
 float:right;
 background:#0000FF;
}

で、この状態。　main_boxの背景色が反映されてません。なんてこった。

main_boxに　overflow:auto;　を記述。すると・・・

しっかりmain_boxの背景が反映されました！！

さらにposition指定のボックスを追加する場合の対処

対処版のHTMLの記述

<div id="main_box">
 <div id="box_other">
 割りこんでやんよ
 </div>
 <div id="box_left">
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 </div>
 <div id="box_right">
 <dl>
 <dt>1</dt>
 <dd>2</dd>
 </dl>
 </div>
</div>

新規で任意の場所に置くための #box_other を追加。

対処版のCSSの記述

#main_box {
 padding:10px;
 margin:50px;
 width:220px;
 background:#000;
 color:#FFFFFF;
 font-size:16px;
 font-weight:bold;
 text-align:center;
 position:relative;
 overflow:auto;
}

#box_left {
 width:100px;
 float:left;
 background:#FF0000;
}

#box_right {
 width:100px;
 float:right;
 background:#0000FF;
}

#main_box #box_other {
 width:50px;
 height:50px;
 background:#FF00FF;
 position:absolute;
 top:-20px;
 left:100px;
}

で通常の main_boxに position:relative; 、box_otherの position:absolute; を記述。

これで本来はいいのだが!!しかし!!

前者のoverflowが引き継がれmain_box内の領域内に収まってしまった！

ここでmain_boxのoverflow:auto;を display: inline-block; に変更！

すると・・・

見事に任意の場所にother_boxを乗っけられました！

まぁつまり最初からこの方法でやっときゃ問題ないかと・・・

display要素について補足

display: inline-block; の他にdisplay: inline-tableの指定でも可能な様ですが、

JavaScriptでcss要素のエラーが出たりMacIEにおいてdisplay: inline-tableが効いているボックスの子要素を絶対配置(position: absolute)で配置しようとしても、意図とは反した場所に表示されてしまう現象など、何点か問題点もある様です。

---

---