スタイルシートでのデザイン

質問

HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。
例えば、
<table align="center">
<tr>
<td colspan="2" width="500" height="80">aaa</td>
<td rowspan="2" width="300" height="200">bbb</td>
</tr>
<tr>
<td colspan="2" width="500" height="20">ccc</td>
</tr>
<tr>
<td width="200" height="100">ddd</td>
<td width="300" height="100">eee</td>
</tr>
</table>
をスタイルシートで配置しようと思い、
<div align="center" style="width:800px">
<div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div>
<div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div>
<div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div>
<div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div>
<div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div>
</div>
としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。
うまく出来ないので、どなたか教えて下さい。お願いします。

回答No.1

nekonyanko · ベストアンサー

<div align="center">
<div style="width:800px">
<div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div>
<div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div>
<div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div>
<div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div>
<div style="float:left;width:300px;height:100px;background-color:#ffff99">eee</div>
</div>
</div>
これでイメージどおりにできてますか？

お礼

回答いただきありがとうございます。

最初の行で、行揃えと幅の設定は別々に設定しないといけないのですね。
また、3つの列組みをする場合は、「left」「center」「right」でなく、左から順にという感じなのですね。