DIVで表示が崩れる。

質問

こんにちわ。
お願いします。
TABLEから脱出してDIVで整理整頓しようとおもっているのですが
なかなかうまくいきません。
ソースはっちゃいますね
<DIV style="width : 780px;height : 100%;z-index : 0;">
<DIV style="width : 780px;clear : both;z-index : 1;"></DIV>(2)
<DIV style="width : 200px;float : left;z-index : 2;"></DIV>
<DIV style="width : 380px;float : left;z-index : 2;"></DIV>
<DIV style="width : 200px;float : right;z-index : 2;"></DIV>(1)
</DIV>
といった感じでベースになっているDIVがデカデカとあり
その中に一段目のDIV(回り込み解除/ヘッダー的役割です)があってその下にDIVが3つ回りこみで並んでる。
という。
で、問題が、HBビルダーで作っているのですが、
３つならんでるDIV、
一番左は「左に廻り込み」
真ん中は「左に廻り込み」
で、問題は一番右です。
ここを「右に廻り込み」にしなきゃ３つ並ばないのですが、（廻り込み設定しない場合一段下がってしまいます）このままだと、(1)の部分に文章やらTABLEやら画像やらいれると(2)の位置へ表示されてしまいます。(ソースは変わらないのですが)。
ならばとおもってDIVを入れると、右のDIVの下に来てしまいます。
ならばとおもい３つのDIVをDIVで囲み、その外に書いても右のDIVの下へ…
俺がしたいのは、
とにかく一段下げたいのです。TABLEでいえばTRを作りたい。

わかりますでしょうか？

回答No.1

noname#199778 · ベストアンサー

とりあえず、フロート指定を解除してみるのが良いように思います。
中段で3つのボックスがフロートになっていますが、この部分を終了する意味で、その下にスタイルシートで「clear: both;」を持つ要素を配置すれば良いのではないでしょうか。
ちょっと書き直してしまいますが、以下のようにしてみてはいかがでしょう。

<DIV style="width: 780px; height: 100%; z-index: 0;">
<DIV style="width: 780px; z-index: 1;"></DIV>
<DIV style="width: 200px; float: left; z-index: 2;">左</DIV>
<DIV style="width: 200px; float: right; z-index: 2;">右</DIV>
<DIV style="z-index: 2;">真ん中</DIV>
<DIV style="clear: both;">
(1)</DIV>
</DIV>

要は、(1)の部分で、それ以前に「style="clear: both;"」を持つ要素を挟むことが必要になるのではないかと思います。

参考になれば幸いです。

お礼

お礼が送れて申し訳ありません、
ソース見るといれかわってるけど、考えてみればこれが正しいんですよね。入れ替わってるわけじゃなく。回り込みなんだし。
たすかりました。
ありがとうございます