コンテナボックス内のフロートクリアについて6(MacIE対応版)

確認済みブラウザ

IE 5.5/6.0/7.0/8.0 IE 5.2.3 Firefox 1.5/2.0/3.0 Safari 3.1 Opera 9.0

CSS2.1から新しくdisplayプロパティの値に ‘inline-block’ が追加されています。CSS Validator(CSS レベル 2.1)でエラーも出なくなりました。(CSS レベル 2ではエラーが出ます)

height:auto !important; height:1%;を使っていましたが、display: block !important; display: inline-block;でも同様の効果が得られるようになりました。

これにより1行のハックでMacIEにも対応出来るようになりました。

CSS

.hwrap{
display: block !important; display: inline-block;
overflow:hidden;
color: inherit;
background: #CCC;
}

.hwrap{ display: block !important; display: inline-block; overflow:auto; }

Type : A / HTML / サンプル


<div class="hwrap">
<div class="nl">
<p>左サンプルコンテンツ:120px 背景#C00</p>
</div>
<div class="nr">
<p>右サンプルコンテンツ:120px 背景#0C0</p>
</div>
<p>背景に色指定#CCC</p>
</div>

Type : B / HTML / サンプル


<div class="hwrap">
<div class="nl">
#nl:左サンプルコンテンツ:120px 背景#C00
</div>
<div class="nr">
#nr:右サンプルコンテンツ:120px 背景#0C0
</div>
#hrim:背景に色指定#CCC
</div>

Type : C / HTML / サンプル


<div class="hwrap">
<p class="nl">
#nl:左サンプルコンテンツ:120px 背景#C00
</p>
<p class="nr">
#nr:右サンプルコンテンツ:120px 背景#0C0
</p>
<p>#hrim:背景に色指定#CCC</p>
</div>