CSSでフローとした際の親要素の高さ

質問

CSSでfloatしたものって、親要素のheightに反映されません？ただ親要素に背景があって、反映されないと凄く困る感じで・・・。
それってどうやって回避すればいいでしょうか？
取りあえず

<div style="width:750px;background:url(mainback.gif)">
<div style="float:left;width:300px;">左側</div>
<div style="float:right;width:450px;">右側</div>
<br style="clear:both;">
</div>

のように、<br style="clear:both;">みたいにして取逃げたんですが、そもそも無意味なbrを入れるのもどうかと思うし。文法的にもbrにclearって微妙な気もするし、
なにか良い逃げ方ってないでしょうか？？

ご存知の方、宜しくお願いいたします。

回答No.2

ao_ · ベストアンサー

まず、外部CSSを作ってリンクしてください。
この現象はCSS2の仕様なんです。
mainback.gifを背景にしたdivにclass名を付け、（仮にAとします）
外部スタイルシートに
.A:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.A {display: inline-table;}

/* Hides from IE-mac ?*/
* html .??? {height: 1%;}
.A {display: block;}
/* End hide from IE-mac */

とコピペすると解決します。
HTMLコードをキレイにする意味でも外部スタイルシートをおすすめします。

参考URL：

http://www.positioniseverything.net/easyclearing.html

お礼

無事うまくいきました。
ありがとうございました。使いまわし出来るし、最高です！！

回答No.1

wakame0729

背景のためにやってるのではないのですが、左右に別けたブロックの下にもう一つDIVでブロック(フッタ部分って感じ)を作る時clear:bothを<br>や<tr>に定義しちゃう事はありますね。heightの指定はしたくないので、こういう事やってしまいます。

僕も文法にはこだわる方なんですけど、色々やってると理不尽な事って結構ありマス(^^;。特にDIVを使ったレイアウトをしていると、謎な挙動に結構出くわすんですよね。今回の質問に関しては<br style="clear:both">で回避できるなら、それでいいんじゃないでしょうか。

お礼

なんか文法にこだわってると、きりないかもですね（汗；）
ちなみにこの質問を載せた後に、clear:bothについて調べてみたんですが、本当はブロックレベルにしか使えないらしいです。
だから、やっぱりこれも本当はダメらしい・・まぁうまく表示されるから今のところはOKだけどね（笑）

ありがとうございました。