Floatを使ってレイアウトをするとき、最初にはまるのが幅の設定(^^;) 下記のようにブロック要素を５つ使って、中の三つをフロートして3カラムでレイアウトしたとします。
サイトネーム
コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ
スタイルシート
#MainContainer{width:300px;}
#HeaderBlock{width:100%;}
#SideBlock1{width:25%;float:left;}
#MainContents{width:50%;float:left;}
#SideBlock2{width:25%;float:left;}
#FooterBlock{width:100%;clear:left;}
ソース
<div id="MainContainer">
<div id="HeaderBlock">サイトネーム</div>
<div id="SideBlock1">BLOCK1</div>
<div id="MainContents">コンテンツ</div>
<div id="SideBlock2">BLOCK2</div>
<div id="FooterBlock">フッター</div>
</div>
Floatを使ったデザインは、｢mergin｣も｢padding｣もゼロ、ボーダーラインもなしという前提で成立します。 ここに、枠線（border）を加えると、その太さの分だけ、レイアウトが崩れてしまいます
サイトネーム
コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ
フッター
paddingを入れたくなりますが、枠線と同様に、paddingの量だけブロックの幅が大きくなって、レイアウトが崩れてしまいます
サイトネーム
コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ
フッター
これを解決するには、｢border｣や｢margin｣｢padding｣の数値を全体の幅に足してやれば良いわけですが、もっと簡単に解決するには………
スポンサーリンク
スポンサーリンク
それぞれのボックスの中に、もうひとつ別のボックスを入れて、その要素に｢border｣や｢margin｣｢padding｣を設定すれば全体のレイアウトは崩れませんね
サイトネーム
コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ
フッター
これ、分かってしまえば当たり前の話なんでしょうが、気づくまでちょっと苦労してしまったのでした・・・(^^;)
コメント