お品書き
書き直し中…
とりあえず、中へどうぞ
↓↓↓
スポンサーリンク

Floatで作ったレイアウトが崩れるのを防ぐには? 【簡単な事だった】

WEBデザイン
Floatを使ってレイアウトをするとき、最初にはまるのが幅の設定(^^;)

下記のようにブロック要素を5つ使って、中の三つをフロートして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」を設定すれば全体のレイアウトは崩れませんね
    サイトネーム
  •  
  •  
  • コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ
  •  
  •  
  • フッター
    これ、分かってしまえば当たり前の話なんでしょうが、気づくまでちょっと苦労してしまったのでした・・・(^^;)

    コメント