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

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

解決済みの質問

CSSだけで奇麗にサイトを作りたい。

Mac Golive CS2を使っています。
大体以下のような形でCSSを記述しています。(他の文字やマージン等細かい設定は省いてます)
自分のイメージとしては灰色の背景に、メインの白い箱があってその中に左右に小箱が並んで入ってる感じです。

CSS :
body { background-color: #999; }
#main { background-color: white; width: 700px; height: auto; }
#left { width: 200px; height: auto; float: left;}
#right { width: 500px; height: auto; float: right;}

HTML :
<body>
<div id="main">
<div id="left">左の内容</div>
<div id="right">右の内容</div>
</div>
</body>

そこで質問なのですが、上記の場合、mainの縦がautoになっているdivの中にleftやright等のdivを入れるとmainからleftなどがはみ出てしまうのです。(というかmainのdivが表示すらされない。なぜ?)
divは入れ子が出来ないのでしょうか?現在どうしてもこの形で作りたいのでleftとrightの箱をtableで代用していますが、tableは使いたくありません。
あとmainの箱にleftなどの箱の大きさの分だけ<br>をたくさん入れるという方法がありますがそれもやりたくありません。
わかりにくい質問かもしれないのですが助言の程頂けましたら有り難いです。

投稿日時 - 2007-04-27 19:00:44

QNo.2955061

すぐに回答ほしいです

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

こんばんは。
<div>はもちろん入れ子にできますよ!

ただし、今回の場合のようにfloatを使ってボックスを回り込ませている場合は、そのボックスより下の<div>で (今回はこの<div>がないですが) 回り込みを解除してやらないとレイアウトが崩れることがあります。
今回はまさにそれで、回り込みの解除がされていないためにレイアウトが崩れているようです。



具体的には「<div id="right">右の内容</div>」より下に「<div style="clear: both;"></div>」と入れると解決すると思います。
もしくはフッターとして新しく「<div id="right">右の内容</div>」より下に「<div id="footer">任意のフッターの中身</div>」と入れ、CSSの方で「#footer { clear:both; }」としても同じ意味ですね。

-----------------------------------
<body>
<div id="main">
<div id="left">左の内容</div>
<div id="right">右の内容</div>
<div style="clear: both;"></div>
</div>
</body>
-----------------------------------
もしくは
-----------------------------------
■CSS:
body { background-color: #999; }
#main { background-color: white; width: 700px; height: auto; }
#left { width: 200px; height: auto; float: left;}
#right { width: 500px; height: auto; float: right;}
#footer { clear: both; }

■HTML:
<body>
<div id="main">
<div id="left">左の内容</div>
<div id="right">右の内容</div>
<div id="footer">任意のフッターの中身</div>
</div>
</body>
-----------------------------------

投稿日時 - 2007-04-27 19:20:41

お礼

迅速な回答ありがとうございます!
clear: both;と書くのですね!全く知りませんでした。
回り込みの解除というのが重要なんですね。
本当にありがとうございました!!

投稿日時 - 2007-04-27 20:51:47

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

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

回答(1)

あなたにオススメの質問