CSSで画面を構成しています。

質問

CSSで画面を構成しています。
左ブロック、右ブロック共に角丸の四角にしたいので、**_head.gifというようなフタとソコになるような画像を使っています。
このままだと左右ブロックの高さが当然そろわないのですが、何か良い方法はないでしょうか？
テーブルレイアウト以外であれば、多少イレギュラーな方法でもかまいません。

*css**********
div#body{width:800px;
margin:10px auto;
text-align:center;
padding:0;
}

div#header{padding:0;
margin:0 0 10px 0;
background-image:url(**.gif);
width:800px;
height:50px;
text-align:left;
}

div#main{
width:800px;
text-align:left;
}
div#submenu{padding:0;
margin:0 10px 10px 0;
width:200px;
text-align:left;
float:left;
}
div#contents{padding:0;
margin:0 0 10px 210px;
width:590px;
text-align:left;
}
div#footer{padding:0;
margin:0 0 5px 0;
clear:both;
width:800px;
height:30px;
text-align:left;
}

*html****
<div id="body">
<div id="header">
ヘッダー
</div>
<div id="main">
<div id="submenu">
<img src="img/common/sub_head.gif" width="200" height="10" />
　<div>左ブロック</div>
<img src="img/common/sub_foot.gif" width="200" height="10" />
</div>
<div id="contents">
<img src="img/common/main_head.gif" width="590" height="10" />
　<div>右ブロック</div>
<img src="img/common/main_foot.gif" width="590" height="10" />
</div>
</div>
<div id="footer">
フッター
</div>
</div>

回答No.1

wisize · ベストアンサー

どうしても左右の大きさを揃えたいのでしたら、
コンテンツ全体をひとつのボックス要素で囲んでしまうのはいかがでしょうか？
言葉で説明しにくかったのでお絵かき添付機能というのを使ってみましたが、
我ながら下手くそな図でびっくりです^^;

個人的には、この程度ならばテーブルレイアウトの悪影響は少ないですし、
変に手間をかけるよりは頼ってしまっても問題ないんじゃないかと思います。
特にstrictであることにこだわっているのではないようなので……。

お礼

時間かかってすいません、ありがとうございました。
こちらのご提案元に変更させていただきました。

回答No.2

salonpath

sub_head.gif+main_head.gifの画像を#headerのbackgroundでbottomに
sub_foot.gif+main_foot.gifの画像を#footerのbackgroundでtopに
#mainに柱部分の背景を指定。
headerとfooterの背景を使えないなら適当な要素を追加するとかして用意。

お礼

時間かかってすいません、ありがとうございました。