<html lang="ja">
<head>省略</head>
<body>
<div id="header">headerの内容</div>
<div id="main">
<div id="left">左側の内容</div>
<div id="right">右側の内容</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="footer">footerの内容</div>
</body>
</html>
といった感じのトップページをCSS+htmlで作りました。見てわかる通り、<br>が無駄にたくさんあります。
でもこの無駄<br>がないと<div id="left">の内容を無視して、<div id="main">の縦の長さが0みたいに表示されてしまいます。
だから<div id="main">の縦の大きさを数値で指定すると上手くいくのですが、可変するようにしたいのでautoにして、結果無駄<br>をたくさん記述するはめになっています。
以前こちらで<div>の入れ子が上手くいかない時に clear: bothを入れると良いと聞いて入れ子構造は出来たのですが、今度は無駄<br>がないと入れ子にした際に（縦をautoにした場合）外側のdivが表示されないという状況です。
わかりづらい説明で申し訳ないのですが、何かが間違ってるせいだと思うのでわかる方宜しくお願いします。
投稿日時 - 2007-06-19 15:40:46
http://allabout.co.jp/internet/hpcreate/subject/msubsub_series_hpcreate05.htm
↑サイトの記事
スタイルシート(CSS)で段組を構成する4(前編) 段の背景色が切れないようにする
あたりを参考に。
参考URL：http://allabout.co.jp/internet/hpcreate/subject/msubsub_series_hpcreate05.htm
投稿日時 - 2007-06-19 15:55:09
お礼
早速の回答誠にありがとうございます！
やっとdivの入れ子についてちゃんと理解出来たように思います。
分かりやすい解説記事を紹介して頂き誠にありがとうございました。
また分からない事がありましたらその時はぜひとも宜しくお願い致します。
投稿日時 - 2007-06-19 17:06:20
0人が「このQ&Aが役に立った」と投票しています
