こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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>

投稿日時 - 2010-08-30 18:32:37

QNo.6146822

すぐに回答ほしいです

質問者が選んだベストアンサー

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

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

投稿日時 - 2010-08-30 20:42:44

お礼

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

投稿日時 - 2010-09-13 14:36:59

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

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

投稿日時 - 2010-08-30 23:07:22

お礼

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

投稿日時 - 2010-09-13 14:37:26

あなたにオススメの質問