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

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

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」を設定すれば全体のレイアウトは崩れませんね

    サイトネーム
  •  
  •  
  • コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ
  •  
  •  
  • フッター


    これ、分かってしまえば当たり前の話しなんでしょうが、気づくまでちょっと苦労してしまったのでした・・・(^^;)


    スポンサーリンク
    スポンサーリンク

    記事をシェアする