CSS: sidebarとcontentがfloatのときcontentの中ではclearできない場合


多分、すごく初心者な問題なのだろうけど、半日悩んだ。結局解決もできていない。みんな、clearfix:after とか、わざわざやっているのだろうか。僕はどうにも合点がいかない。親のcontainerにoverflow:hiddenをする?それはうまく行かなかった。どうにも納得がいかない。さてその問題とは以下のようなことである。

<div id=”sidebar”>と<div id=”content”>を作ってお互いをfloat設定して横にならべるというのはもはや普通にやることだと思う。しかし、contentの中でclearをしてtableなどを記述すると、そのテーブルの上の領域がsidebarの残りの高さの分ごっそり空白になってしまう。例を書いてみよう。

#sidebar_xxxx { width: 120px; border:1px solid #F99; float: left; } #content_xxxx { margin-left:130px; border:1px solid #F99; }

コンテント
コンテント
↓ここにclear:leftを記述すると、テーブルのところまでに余計な余白が! 

コンテント コンテント
コンテント コンテント

このHTMLソースは以下↓

<style>
#sidebar_xxxx {width: 120px;border:1px solid #F99; float: left;}
#content_xxxx {margin-left:130px;border:1px solid #F99;}
</style>
<div id=”sidebar_xxxx”>
サイドバー<br />
サイドバー<br />
サイドバー<br />
サイドバー<br />
サイドバー<br />
サイドバー<br />
サイドバー<br />
</div>
<div id=”content_xxxx”>
コンテント<br />
コンテント<br />
↓ここにclear:leftを記述すると、<b>テーブルのところまでに余計な余白が</b>!
<div style=”clear:left”></div>
<table border=”1″>
<tr><td>コンテント</td><td>コンテント</td></tr>
<tr><td>コンテント</td><td>コンテント</td></tr>
</table>
</div>

上記の例では、clear:left を入れる必然性はないが、contentの中で何かをfloatしてclearしたいということは、普通にあるのではないかと思う。

 

広告