cssのfloatについて質問があります。
cssのfloatについて質問があります。
floatがなかなか理解できずに悩んでおります。
下記のようなcssがあり、同じブロック要素でも
table,pなどは右に回りこみ、divボックスはfloatを指定しないと
floatボックスの下に入ってしまうのをなんか理解できません。
初歩的なことかもしれませんが、
どなたかアドバイスいただけると助かります。
宜しく尾根会い致します。
<html lang="ja">
<head>
<title></title>
<style type="text/css">
#con {
width: 800px;
border: solid 1px black;
}
.left {
width: 300px;
height: 300px;
float: left;
border: solid 1px blue;
}
.right {
width: 200px;
height: 200px;
border: solid 1px red;
}
table {
width: 100px;
height: 100px;
border: solid 1px green;
}
p {
border: solid 1px yellow;
}
</style>
</head>
<body>
<div id="con">
<div class="left">
</div>
<table>
<tr><td>TABLE</td></tr>
</table>
<p>ppppp</p>
<div class="right">
</div>
</div>
</body>
</html>
補足
有難うございます。 IE7ではうまくいったんですが、Firefoxではうまくいっていません。 幅が問題かな・・・。もうちょっと頑張ってみます。