みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

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

解決済みの質問

レイアウトが崩れます

汚いソースで失礼します。
メニューとコンテンツとサブメニューがありますが
この3つの高さを保つにはどうしたらいんでしょうか?
コンテンツ部分の高さが長いと メニューとサブメニューの高さは短いままで ダサい感じなんです。 なんとご説明したらいいのやら(汗
コンテンツ部分が長くてもメニューとサブメニューの高さを自動に設定させるようにするには、どうしたら良いのでしょうか?
ご教授願います

HTMLのソース+CSSです↓

<html>
<body>
<div class="wrapper">
<div class="header">
ヘッダーになります<br>
</div>
<div class="main">

<div class="menu">
menu<br>
menu<br>
menu<br>
menu<br>
menu<br>
menu<br>
</div>
<div class="contents">
コンテンツになります<br>
コンテンツになります<br>
コンテンツになります<br>
コンテンツになります<br>
</div>
<div class="submenu">
サブメニューはこちらです<br>
サブメニューはこちらです<br>
</div>
</div>
<div class="footer">
フッター<br>
</div>
</div>
</body>
</html>

CSS

.wrapper {
width: 900px;
margin: 0 auto;
line-height: 1.5;

}
/* メイン*/
.main {
width: 900px;
}

/* ヘッダ*/
.header {
width: 900px;
height: 200px;
background-color: #66FFFF;
background:url(img/top2.jpg) ;
}
/* Menu*/
.menu {
width: 150px;
float: left;
background-color: #FFFF99;
}

/*コンテンツの設定*/

.contents {
float: left;
width: 600px;
background-color: white;
}

/*SubMenuの設定*/
.submenu {
float: left;
width: 150px;
height: 300px
background-color: #66FF66;
}

/* 下の設定 */
.footer {
clear: both;
width: 900px;
border-top: 1px dotted gray;
height: 20px;
text-align: center;
font-size:0.7em;
background-color:black;
}

投稿日時 - 2008-01-11 05:02:49

QNo.3669116

すぐに回答ほしいです

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

↓を参考にして下さい。
コラム数が増えても基本的に同じ事です。

スタイルシート(CSS)で段組を構成する4(前編) 段の背景色が切れないようにする - [ホームページ作成]All About
http://allabout.co.jp/internet/hpcreate/closeup/CU20050328A/index.htm
http://allabout.co.jp/internet/hpcreate/closeup/CU20050401A/index.htm

参考URL:http://allabout.co.jp/internet/hpcreate/closeup/CU20050328A/index.htm

投稿日時 - 2008-01-11 09:06:33

ANo.1

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

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

回答(1)

あなたにオススメの質問