ホーム > Web > 包含ボックスからフロートした要素が飛び出す

包含ボックスからフロートした要素が飛び出す

仕事で壁にぶち当たり一応解決したのでメモします。

float

記事リスト（今回はdiv使用）を箱状に整形し、それをフロートで枠線ありの包含ボックスの中に流し込むとIE6では最下段が上段と同じ数では無い場合に最下段が包含ボックスからはみ出してしまいます。
これを解決する方法は、包含ボックスにwidthを設定するだけです。

div#wrap {
overflow: hidden;
border: #000 solid 1px;
}
div#wrap div {
float: left;
width: 200px;
height: 100px;
}

ただし、この方法ではリストの要素（今回のdivでもliでも）にheightを指定しないと上に表示されるリストの左側部分より右側部分の高さが短い場合、左側がぽっかり空いてしまう事態に陥ってしまいます。
こういう場合のスマートなマークアップを誰かご存じなら教えてください…

関連する投稿