- ベストアンサー
CSSでのレイアウト（Firefox向け）
下のようなレイアウトをCSSで行いたいと思っています。しかし意図するような表示にFireFoxではなりません。FireFoxではどのようにすれば上手くいきますでしょうか？（上手くアスキーアートが書ければいいのですが、、、センタリングされたBOXの中で、さらにBOXが2つ並ぶというようなものです。） ┌──────────────┐ ｜┌─────┐┌─────┐│ ｜｜TEXT ｜｜TEXT ｜｜ ｜｜ ｜｜ ｜｜ ｜└─────┘└─────┘│ └──────────────┘ <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #box { margin: 10; border-style:solid; width: 300px; float: left; } </style> </head> <body> <div id="canpas"> <div id="box">testtesttest</div> <div id="box">testtesttest</div> </div> </body> </html> ぜひよろしくお願いします。
- HTML
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
＞body {text-align:center;}が間違っています。 ＞これは、IE互換モード対策の記述方法です。 質問者の方は別に標準準拠でHTMLを書こうとしているわけではない為、 互換モードの記述を行ってもあまり問題はないのでは？ ただ、body {text-align:center;}をやめたほうがいいというのは同感です。 コレではIEでみたとき余計なところまでセンタリングされてしまいます。 <html> <head> <style type="text/css"> #box { text-align: center;} #campas { text-align: left; margin-left: auto; margin-right: auto; border-style:solid; width: 700px;} #lbox { position:relative; margin: 10px; width: 310px; left: 10px; border-style:solid; float: left; } #rbox { position:relative; margin: 10px; width: 310px; right: 10px; border-style:solid; float: right; } </style> </head> <body> <div id="box"> <div id="campas"> <div id="lbox"> left </div> <div id="rbox"> right </div> <br style="clear: both;"> </div> </div> </body> </html>
その他の回答 (4)
- partita
- ベストアンサー率29% (125/427)
body {text-align:center;}が間違っています。 これは、IE互換モード対策の記述方法です。 text-alingはインライン要素を中央揃えにします。 divはブロック要素ですので、中央揃えにするときはmargin-right:auto;とmargin-left:auto;を使用します。 DOCTYPEも確認してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>タイトル</title> <style type="text/css"> #canpas {width:700px;margin:atuo;} #lbox {width:300px;float:left;} #rbox {width:300px;float:right;}←float:left;でも可 </style> </head> <body> <div id="canpas"> <div id="lbox">中身</div> <div id="rbox">中身</div> </div> </body> </html>
お礼
ありがとうございます。 きっちりと正しいものを書きたいのですが、そのまえに正しいものを知りたいです。大変参考になりました。
- Mac10
- ベストアンサー率44% (17/38)
同じidを複数の場所で指定しては駄目です。 (今回の場合boxが二つあります) 複数で利用したい場合はclassで指定してくださいな。
お礼
ありがとうございます。 まさにIDとして使うということですね。
- orc-orca
- ベストアンサー率68% (15/22)
しつれい，問題の firefox でまったく見れませんね．今度こそＯＫです．ただし，もっとエレガントにかけそうですけど． ----- <html> <head> <style type="text/css"> body { text-align: center;} #campas { text-align: left; margin-left: auto; margin-right: auto; border-style:solid; width: 700px;} #lbox { position:relative; margin: 10px; width: 310px; left: 10px; border-style:solid; float: left; } #rbox { position:relative; margin: 10px; width: 310px; right: 10px; border-style:solid; float: right; } </style> </head> <body> <div id="campas"> <div id="lbox"> left <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="rbox"> right <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <br style="clear: both;"> </div> </body> </html>
お礼
ありがとうございます。 上手く表示されました！このあたりの使い分けなのですね。 text-align: left; margin-left: auto; margin-right: auto; float: left; float: right;
- orc-orca
- ベストアンサー率68% (15/22)
ほとんど，funaさんの記述でOKです． 以下で確認してみてください． ----------------------------------- <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #lbox { margin: 10; border-style:solid; width: 300px; float: left; } #rbox { margin: 10; border-style:solid; width: 300px; float: right; } </style> </head> <body> <div id="canpas"> <div id="lbox">testtesttest <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="rbox">testtesttest <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> </body> </html>
お礼
なるほど、2重にセンタリングをしているのですね。 - margin-left: auto; margin-right: auto;で標準準拠でセンタリング - その親でもtext-align: center; - しかしその子の中では再びtext-align: left;として戻す 大変参考になりました。ありがとうございました。