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

解決済みの質問

cssでの高さの調整がうまくいきません

はじめまして。当方css初心者です。

現在DreamWeaver8でCSS+XHTMLでホームページを作成しているのですが、どうもうまくいかないことがあります。よければご意見下さいませ。

以下のソースでmaincontentsに情報を盛り込み、bodyで背景に色をつけてるため、wrapperの背景を白にしてコンテンツ部を白にしたいのですが、maincontentsの情報が少し増えるとwrapperの枠を飛び出してしまいます。wrapperの高さを指定しておけばその範囲では大丈夫なのですが、ページによってmaincontentsの情報量が異なるので「高さ:自動」にすると、contentsの高さまでしか広がってくれません。

各ページの情報量が異なるためwrapperの高さも自動で広がって欲しいのですが、どのようにすればよろしいでしょうか。ソースの間違えあると思います。お手数ですが、よろしくお願い致します。

html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<link href="file:///E|/testweb/css.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
<div id="header"> id "header" の内容がここに入ります</div>
<div id="contents">
<div id="maincontents">
<p>id "maincontents" の内容がここに入ります</p>
</div>
<div id="sidenavi"> id "sidenavi" の内容がここに入ります</div>
id "contents" の内容がここに入ります</div>
id "wrapper" の内容がここに入ります</div>
</body>
</html>

css
#wrapper {
height: auto;
width: 850px;
}
#header {
height: 50px;
width: 850px;
}
#contents {
width: 850px;
}
#contents #maincontents {
width: 680px;
float: left;
}
#contents #sidenavi {
float: right;
width: 90px;
}

投稿日時 - 2009-03-22 22:40:38

QNo.4819221

すぐに回答ほしいです

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

お礼メールを見てからの回答。回答するのは簡単ですが、
まず、今現状どうなっているのか把握すること。(原因の追及)
これがわからなければ今後も苦労しますよ!
※ 一旦、背景色とコンテンツの背景色を指定しdiv毎の枠線を指定。
IEが正規解釈しないから変な事になっている。Firefox で確認する事。
---------------------------
body{ background:#999;}
div{ border:1px solid blue;}
---------------------------
一旦、こうすれば、#maincontentsと#sidenaviが float で左右に分かれてるのがハッキリわかります。隙間もあるようです。
float をするということは、上に上げる事。 なので、下の物が全て上がっている状態になると考えておく。 下になっている場合は、単に、上に幅があって落ちて見えているだけと考えておけば納得できる。

よって float を止める部分から clear で解除してやる事。
解除方法は、その下のブロック要素に clear を指定。
{clear:both } とかを下のブロックにCSSで割り当てるか、
<br style="clear:both"> や <hr style="clear:both">
<div style="clear:both"></div> の空要素でも出来る事はできる。

つまり
<div id="sidenavi"> id "sidenavi" の内容がここに入ります</div>
の下に更にdivで枠を作って clear してコンテントを設定するか、
<br style="clear:both">
を一旦入れてやって解除しておくとか。

投稿日時 - 2009-03-23 01:14:37

お礼

naokita様

早速のご回答有難うございます。

頂いた説明ではっきりと理解できました。今日ずっと悩んでいたので、頭の中がすっきりしました!

本当に親切に有難うございました。

投稿日時 - 2009-03-23 01:36:38

ANo.2

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

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

回答(2)

ANo.1

auto でどうしたいのかな・・・

float したら clear すれば良い。 って意味じゃなくて?

投稿日時 - 2009-03-22 23:19:03

お礼

naokitaさん、早速のご回答有難うございます。

良く理解できてないのですが、maincontentsで情報量がページによって異なるので、autoにしておけばいいのかなと思いそうしております。

また、どこをclearにすればいいのでしょうか。

もしくはこれ以外にやりかたありましたらお答え頂ける範囲で構いませんので、大変お手数かけますが、よろしくお願い致します。

ちなみにIE6では思い通り表示されますが、Firefox 3.0でこの症状がでるようです。

投稿日時 - 2009-03-23 00:22:17

あなたにオススメの質問