レイアウトが崩れないようにするための、<div>を<div>で囲む理由

質問

<div class="a">で一度幅や高さの指定をしているのに、ウインドウサイズを変更しても、レイアウトが崩れないようにするために、その<div>からさらに<div>で囲むのはなぜなんでしょうか？

<div id="wrapper">
　<div class="a"></div>
</div>

div.a {
width:900px;
}

#wrapper{
width:900px;
}

回答No.1

kazumero · ベストアンサー

「ウインドウサイズを変更しても、レイアウトが崩れないようにするため」ではないでしょうか？（＾＾；

divをdivで囲う理由は、色々ありますが、この場合ですと、
<div id="wrapper">
という大きなブロックと
<div class="a">
という、さっきのブロックの中にある一つのブロック
と、意味のあるブロック単位に明示的に分けていると考えられます。
この形ですと、<div id="wrapper">の中に、<div class="a">を複数設置したり、<div class="b">を併設したり、色々できますね。

両方width:900px;を指定しているのは、どっちか片方だけだと、デザインが崩れるブラウザもあるからです。両方指定しておけば確実ですね。

お礼

なるほど。ブラウザによって片方だけ指定しても崩れる場合があるんですね。

ありがとうございました。

回答No.2

leap_day

こんにちは

サンプルのでは余り関係ないですね（＞＜）

例えば
<div style="width:100px;float:left;"></div>
<div style="width:100px;float:left;"></div>

というのがあったとすると
200px以上の幅があれば横に並べて置くことができて、それ以下だとレイアウトが崩れる。でも

<div style="width:200px;">
<div style="width:100px;float:left;"></div>
<div style="width:100px;float:left;"></div>
</div>

としたら200px以下でも崩れないというやつですよね？

200px以下のところに100pxのものを2つ入れようとしても無理ですよね？
そうした場合、上では100pxと100pxの2つに分けられるから無理に入れようとはせずに下にずらしてしまえって感じになるけど
下では200pxでまとめられているから分解できず、表示するには200px必要・・・しょうがないからスクロールバーでも出して無理やり入れてしまえって感じ・・・
言葉で説明しようと思うとどう説明すれば良いか分からないですけどイメージ的にはこんな感じで理解してもらえるでしょうか？

ようはそのサイズに入らないときに分解されてしまうのを防ぐ為に使用しています

お礼

自分の例は悪かったですね。すいません。
divで複数の区分を指定した場合ですね。

なるほど。サイズに入らないときに分解されてしまうのを防ぐためですか。

ありがとうございました。