※ ChatGPTを利用し、要約された質問です（原文：スタイルシートで上手く段組が出来ません。）
スタイルシートで上手く段組が出来ない？！
このQ&Aのポイント
スタイルシートを使用して、段組みを行いたいがうまくいかない。
特に、要素を分割して5つのフレームに配置することが困難。
floatプロパティにもかかわらず、要素が予期しない位置に移動してしまう。
スタイルシートで段組をして、いわゆる擬似フレームのHPを作りたいのですが、いまいち上手く出来ません。
下の画像の赤紫部分(HTML内ではtopsとしている部分)も分割して、全部で5つのフレームに分けたいのですが、そこを分割しようと
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body
{
margin:0px;
padding:0px;
}
#top
{
width:450px;
height:200px;
float:left;
background-color:#cc6600;
}
#tops
{
width:300px;
height:200px;
float:left;
background-color:#cc5555;
}
#left
{
width:250px;
height:600px;
clear: both;
background-color:#ff9933;
}
#right
{
width:500px;
height:600px;
float:left;
background-color:#ffcc66;
}
#under
{
width:750px;
height:10px;
clear: both;
background-color:#ff9955;
}
-->
</style>
</head>
<body>
<div id="top"></div>
<div id="tops"></div>
<div id="left"></div>
<div id="right"></div>
<div id="under"></div>
</body>
</html>
というタグを打つと、topsの部分はちゃんと回り込んでくれるのですが、画像のように、回り込みを解除したleftの横のrightがちゃんとfloat:left;と打ち込んでいるのにも関わらず、leftの下にいってしまうのです。
どうしたらちゃんと5つに分割出来るのでしょうか？
よろしくお願いしますm(_ _)m
お礼
ご回答ありがとうございます。 無事出来ました。 3日間悩んでいて出来なかったのですが、ここで質問したらあっという間に解決しました。 本当にありがとうございました。
補足
ちなみに、なぜ#leftにfloat:leftと入れて、topsの右横に回り込まずにちゃんと下にいったのですか？ それに<br style="clear:both" />←このタグが役立っているのでしょうか？ お手間を取らせてしまってすみません。 つい気になってしまって＞＜ 教えていただけましたら幸いです。