- ベストアンサー
CSSでのレイアウトが崩れる原因と解決方法
- CSSを使用して800pxの画面のセンター表示のサイトを作成している際、div要素の配置がうまくいかない場合があります。
- leftmenuがcontensの右側に表示されず、footerの下に移動してしまう原因は、float:leftの指定が不適切なためです。
- 解決方法として、contens要素でclear:bothを指定することで、div要素の配置を修正できます。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>さらに言うとcontens自体が真ん中に表示されてしまいます そりゃそうだろうね >div#centermenu { >width:450px; >float:left; >margin-left:auto; >margin-right:auto; >background-color:#FFFFFF; >} どう見ても中央揃えになってるね。(centermenu) ここのmargin:autoを外したらどうなる？ それだけで治る気がするけど。。。
その他の回答 (1)
- SAYKA
- ベストアンサー率34% (944/2776)
><div id="contens"> ><div id="leftmenu">省略</div> ><div id="centermenu">省略</div> ><div id="footer">省略</div> ></div> ><div id="rightmenu">省略</div> ↑とcssから読み取れる現状の仮想配置 (等幅以外は崩れるので注意) □□┌──────┐□□ □□│┌─┐┌─┐│□□ □□││Ｌ││Ｃ││□□ □□││□│└─┘│□□ □□││□│┌─┐│□□ □□│└─┘│Ｆ││□□ □□│□□□└─┘│□□ □□└──────┘□□ □□□□□□□□□┌─┐ □□□□□□□□□│Ｒ│ □□□□□□□□□└─┘ L=leftmenu;C=centermenu;F=footer;R=Rightmenu; 1.contens blockはfloatではない →Rは同じ列に現れない 2.Lの縦が長いとFがかぶる →Cの高さによる →Cがfloat:leftであるのでFが右に続こうとする →幅が足りない(L=150;C=450;…600)ので改行する →Cの高さで改行するのでLがCより縦長だと結果的にかぶる (レンダラ依存で被らない場合有り) これを参考にどうおかしいのか考えてみて。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
補足
さっそくの回答ありがとうございました。 div#centermenuのmargin:autoを外してみましたが、contems（つまりleftmenuとcentermenuとfooter）が画面の中央に来て、その下にrightmenuが来てる感じです。あと、すいません、間違えました。contentsの右隣にきてほしいのはrightmenuです。leftmenuってかきましたけどこれはうっかりミスです。申し訳ありません。