2009年8月アーカイブ

↑のように、大枠となる div の中に複数の div を入れ、
float を使って並べるときの注意点です。

以前の記事 【CSSトラブル】　marginが無視される とはまた違う例です。

★HTML
＜div id="box1"＞
＜div id="box2"＞
＜/div＞
＜/div＞

★CSS
#box1{
　　　margin:40px;
}

#box2{
　　 margin:20px;
}

としたときに、



上のように表示されるはずが、



このように、 box2 の上下部分の margin が無視されてしまいます。

これも同じく margin を padding に変えるか、
できるのなら外側の box1 に、width か height を指定することで
解決することができます。

div 内の要素を下揃えにする方法です。


大枠の div を「A」、そのなかで下揃えにしたい要素を
div で囲って「B」とします。

■ divA の設定
・height を指定する
・position:relative; と入れる

■ divB の設定
・position:absolute; と入れる
・bottom:0; と入れる（ピクセルで下からの高さを指定できます）


これで、divA 内で divB を下揃えにすることができます。