- 締切済み
floatがうまくいきません。
以下のスタイルシートに設定したのですが、 #content の幅をぴったしの値 width: 640px; にするとレイアウトが崩れてしまいます。 どこが間違っているのでしょうか。 また、参考になるページがあれば教えてください。 <body> <div id="wrapper"> <div id="header"> </div> <div id="pagebody"> <div id="navigation"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> body { margin: 0; padding: 0; } #wrapper { width: 760px; border-style: solid; border-color: red; border-width: 5px; } #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; } #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; } #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; } #content{ width: 636px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; } #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; }
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- me001az
- ベストアンサー率100% (2/2)
こういう事でしょうか？ ▼━━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-- * { font-size: 100%; padding: 0px; margin: 0px; } body { padding: 0px; margin: 0px; } #wrapper { width: 760px; border: 5px solid #ff0000; } #header { width: 760px; text-align: center; background: #0000ff; padding: 5px 0px; } #headbox { text-align: left; width: 750px; height: 75px; background: #ffffff; margin: 0px auto; } #pagebody { background: #ffff00; padding: 5px; } #navigation { text-align: center; width: 100px; background: #00ff00; padding: 5px 0px; } #navibox { text-align: left; width: 90px; height: 480px; background: #ffffff; margin: 0px auto; } #content { float: right; text-align: center; width: 650px; background: #ff6600; padding: 5px 0px; } #contentbox { text-align: left; width: 640px; height: 480px; background: #ffffff; margin: 0px auto; } #footer { clear: both; width: 760px; text-align: center; background: #000000; padding: 5px 0px; } #footbox { text-align: left; width: 750px; height: 20px; background: #ffffff; margin: 0px auto; } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="headbox"></div> </div> <div id="pagebody"> <div id="content"> <div id="contentbox"></div> </div> <div id="navigation"> <div id="navibox"></div> </div> </div> <div id="footer"> <div id="footbox"></div> </div> </div> </body> </html> ▲━━━━━━━━━━━━━━━━━━━━━━━━ 一つのブロックレベル要素に width、padding、margin、borderを共存させると 言う事を聞いてくれないので、別要素にそれぞれ 指定します。 多少DIVだらけになってしまいますが・・・ 参考になれば幸いです。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 1ヶ月ぶりに戻ってきたので経緯が分からないですけど・・・ 落ちる理由は#navigetionをfloatしているのに対し#contentをfloatさせていないからだと思います floatと通常のものを横並びにした場合(IE)、その間にどうしても隙間ができてしまうので750pxきっちりにするとoverflowして下に追いやられてしまいます Firefoxで下に行かなかったのはこの場合横並びにならず#contentは#navigationの下から表示されているからではないですか？（黄枠の右に隙間がありませんでしたか？） ドキュメント宣言をしているのであれば#contentにfloat:left;を追加して解除するところにclear:both;を入れればいいかと思います 記述以外は質問のものと同じ #content{ width:640px; float:left; } #footer { border-color:black; } </div> <div style="clear:both;"></div> <div id="footer"> </div> </div>
- ICHI-yan
- ベストアンサー率33% (45/134)
それで、宣言は標準なのですか、過去互換なのですか？ それによって、計算方法がちがうことは#3で説明したとおりです。足し算の仕方が違うので自分で意識して計算してください。 当方は、質問時のcssに#4の追加のみを施してIeでも確認しましたが、下に落ちることなく表示されています。 多分、marginやpaddingを0と指定されている為に問題が起きていると思います。なぜなら、floatで右や左に寄せる指定と、margin:0などの指定が両立しないからです。
- ICHI-yan
- ベストアンサー率33% (45/134)
#content{ width: 640px;/*ご要望*/ float:right;} #footer{ clear:both; } 上記cssを元のcssに追加してみてください。
- ICHI-yan
- ベストアンサー率33% (45/134)
宣言が書かれていないので、多分わかっていないだろうということで。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> こういうのをページの先頭に入れるのですがこれが、大きさを計算する時に非常に重要になってきます。 つまり、widthの中にborder・paddingも入れてしまう解釈と border・paddingを含まない解釈との切り替えスイッチになっています。 するてっと、計算方法によって収まりきらずに下に落ちるとか、隙間が空くとかの原因になります。divだけでなくブロック要素すべてに影響しますので、先頭に入れるものをしっかり選ばれることをお薦めします。選ぶ基準はターゲットが誰かって話です。昔のブラウザ使用者もターゲットになるか、新しいブラウザを使っている人にきちんと表示させればいいかです。前者だと新機能が使いづらく、後者だと、古いブラウザ使用者は切り捨てることになります。 図解しているところを２つほど紹介します。 http://allabout.co.jp/internet/hpcreate/closeup/CU20070210A/index13.htm#a8 http://d.hatena.ne.jp/kika/20070325/1174815193
補足
ありがとうございます。 ここには記載していなかったのですが、 宣言は既にしていました。 また、上の方の補足にも書いたのですが、 Firefoxだとうまく表示され、IEだとレイアウトが崩れ contentが下に落っこちてしまいます。 なぜでしょう・・。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
body以外のブロックにはマージンもパディングも指定していないよ うですね。ブラウザ既定のマージン幅およびパディング幅が採用さ れますから、きっとそれが2pxくらいあるんでしょう。 規格書ではマージンやパディングは「継承しない」と定められてい ます。つまり、bodyに対して設定したからといってbodyの中の他の 要素には関係ないんです。すべての要素に対して既定のマージンを 0pxにしたいのなら、 * {margin: 0px;} とでもしてください。
- 参考URL：
- http://www.w3.org/TR/CSS21/
補足
全ての要素に設定したのですが、 うまくいきませんでした。 なんででしょう・・。
- SAYKA
- ベストアンサー率34% (944/2776)
float を使ってるのに clear:both が無いからじゃないかなぁ
補足
試しましたがうまくいきません。 なぜでしょう・・。
補足
#content{ width: 640px;/*ご要望*/ ここの数値ですが、640にするとうまく表示されなかった為、 636pxにしていました。 637px以上だと崩れてしまうんです。 しかし、皆さんのコメントを色々試した所、うまくいきました！ しかし、Firefoxではちゃんと表示されるのですが、 IE6だとうまく表示されません。 今はこうなっています。 @charset "Shift_JIS"; body { margin: 0; padding: 0; } /* 親ボックス */ #wrapper { margin: 0; padding: 0; width: 760px; border-style: solid; border-color: red; border-width: 5px; margin:0 auto; padding: 0; } /* ヘッダー */ #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; margin: 0; padding: 0; } /* メインコンテンツのボックス */ #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; clear: both; margin: 0; padding: 0; clear:both } /* メニュー 左側 */ #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; margin: 0; padding: 0; } /* コンテンツ 右側 */ #content{ width: 640px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; margin: 0; padding: 0; float: right; } /* フッター */ #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; margin: 0; padding: 0; clear:both }