- 締切済み
div#left {width:50%;
div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ちゃんとfloatしてますよ。IEはバグがあって、正しく表示されませんけどね。 floatは、コンテナブロック内で右寄せ(左寄せ)されるもので、それに続くブロック要素は、floatされたブロックがないものとして配置されなければなりません。 最近、本当に良く見るのですが、floatで３カラムや２カラムにするのは、floatの目的、また各ユーザーエージェントの対応状況から見ても誤りです。 とっても気になるのですが、情報源をぜひ教えてください。 floatは記事内で、画像の周囲を回りこんで文字を配置するためだけに使いましょう。たとえば <p class="subFig"><img src="./images/fig1.jpg" alt="正三角形"></p> <p>図はなんたらかんたら・・・・・・・・・・・・・・・・・・・</p> に対して、 p.subFig{ float:right; width:200px;} のように指定する使い方ですし、そのために使う。 続くdiv(汎用ブロック)そのものをフロートさせることはないはずです。内容のテキストはフロートされる。(IEはおかしい)。 HTMLが、正しくマークアップされていると、そのようなソースになるはずはないですし。 <div class="bodyText" id="section1"> <p class="subFig"><img src="./images/fig1.jpg" alt="正三角形"></p> <p>図はなんたらかんたら・・・・・・・・・・・・・・・・・・・</p> <p class="mainFig"><img src="./images/fig2.jpg" alt="計算式"></p> <div class="menue" id="indes"> <h3>目次</h3> <ul> ・・・・・・・・・ ときちんと、文書構造に従ってマークアップして、スタイルシートでは、relativeやabsoluteをつかって割付をしましょう。
- yambejp
- ベストアンサー率51% (3827/7415)
div#rightをfloat:leftしてみては？
