div内でfloatを使うときの注意点

| コメント(0) | トラックバック(1)
090811_02.gif

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

★HTML
<div id="C">
 <div id="A">テキストなど</div>
 <div id="B">テキストなど</div>
</div>

★CSS
#C{
   width:300px;
   padding:20px;
}

#A{
   width:140px;
   float:left;
}

#B{
   width:140px;
   float:right;
}


このようにするとします。
height は中に入る要素に合わせて変化させたいので
指定しません。

しかし、これで実際にみてみると、

090811_01.gif

このようになってしまいます。

こういう場合どうすればいいかというと、
div:C に overflow:hidden; を指定することで解決することができます。

#C{
   width:300px;
   padding:20px;
   overflow:hidden;
}

ただし、稀にこの方法で解決できないケースもあるようです。
そういう場合は、div:B の後に<br />やカラの<div>を入れ、
clear:both; と指定しましょう。

※2011/4/20 こちらに追記があります。
div内でfloatを使うときの注意点2

トラックバック(1)

メモメモ雑記帖 by こうピース excite blog - CSSの基礎/IllustratorCS4【講義13日目】 (2011年4月17日 15:57)

◆div と span div   : idを使用する。多用はしない!(ブロックレベル要素) span : classを使用する。 (インラインレベル... 続きを読む

コメントする

このブログ記事について

このページは、gravity-worksが2009年8月11日 10:31に書いたブログ記事です。

ひとつ前のブログ記事は「【CSSトラブル】 marginが無視される2」です。

次のブログ記事は「inline-block」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。