XHTML+CSSサイトで＜div＞の順序変更によるレイアウト崩壊

質問

よろしくお願いいたします。

コンテンツ部分をmain、右側に帯をつくりsubとして２カラム（他ヘッダとフッタもあります）のサイトです。
XHTMLでdiv id="sub"部分を先に記述してしまったので、div id="main"部分と上下を入れ替えたところ、表示が大きく崩れてしまいました。CSSのfloatで左右指定の確認もしましたが、解決しません。
CSSについては初心者ですので、なにか重大なことを見落としているのかもしれません。教えていただけると助かります。どうぞよろしくお願いいたします..

回答No.2

cyokokichi · ベストアンサー

.sub {width:200px;float:right;}
.main {margin-right:200px;}
<div class="top">**</div>
<div class="contents">
<div class="sub">**</div>
<div class="main">**</div>
</div>
<div class="footer">**</div>
これをこのようにするとfootが回り込んでレイアウトが崩れます。
<div class="top">**</div>
<div class="contents">
<div class="main">**</div>
<div class="sub">**</div>
</div>
<div class="foot">**</div>
これでどうしてもやりたいならmainにもwidthを入れて
.top {width:700px;}
.contents {width:700px;}
.sub {margin-left:500px;width:200px;}
.main {width500px;float:left;}
.foot {width:700px;clear:both;}
-------------------------------------------
<div class="top">**</div>
<div class="contents">
<div class="main">**</div>
<div class="sub">**</div>
</div>
<div class="foot">**</div>
このようにするとできると思います。
------------------------------------
もしIEでレイアウトが崩れるようならsubかmainのwidthを少しづつ小さくすると直ります。
色分けするならcontentsとsubやcontentsとmainの組み合わせでやればごまかすことができます。

参考URL：

http://www3.tokai.or.jp/janboon/csstest.htm

お礼

cyokokichiさま

おかげさまで解決しました。本当にありがとうございます！
助かりました！！

回答No.1

cyokokichi

CSSのfloatは後に続く内容の回り込みをさせるものですからCSSを変更しないでHTMLだけ変更するとレイアウトは崩れると思います。
subにfloat：rightを指定していてsubをmainの下に持ってくるとsubの下に続く内容をsubの左側に持ってこようとするはずです。

補足

cyokokichiさま、早速のご返答ほんとにありがとうございます。

CSSのfloatの件、納得しているつもりなのですが、いろいろ触っているうちに、収集がつかないほど崩れてきてしまいました（涙