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>
これでなぜならないのでしょうか？
投稿日時 - 2010-02-06 18:23:05
2人が「このQ&Aが役に立った」と投票しています
回答（2件中 1～2件目)
ちゃんと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をつかって割付をしましょう。
投稿日時 - 2010-02-06 21:17:33
