親ボックス内でfloatを解除しなかった場合、背景画像が表示されない、或いは親ボックスの下まで表示されない場合などに有効だが、基本的には親ボックス内でfloatを解除した方がbetter。

<div id="box">
<div id="box-a"></div>
<div id="box-b"></div>
</div>
---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }
#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }

<div id="box" class="clearfix">
<div id="box-a"></div>
<div id="box-b"></div>
</div>
---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

 .clearfix { display: inline-block; } /* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
 .clearfix { display: block; } /* End hide from IE-mac */

#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }

参考：Clearing a float container without source markup

和訳：構造のマークアップなしでフロートをクリアする方法

とても参考になる記事：clearfixの決定版を作る －モダンブラウザ編－

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

Page Top

padding指定の注意事項

標準準拠モードでは width 及び height に padding を含みません。

後方互換モードは width 及び height に padding を含みます。

詳細：CSSレイアウト崩れの原因について

#wrapper内に余白を設ける

全体の幅は800pxで固定する事として解説します。

#wrapper内の左右に10pxの余白とる場合

#wrapper{
  width: 780px;
  padding: 0 10px;
}

#content{
    width: 580px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
あるいは

#wrapper{
  width: 780px;
  padding: 0 10px;
}

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 180px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
あるいは

#wrapper{
  width: 780px;
  padding: 0 10px;
}

#content{
    width: 590px;
    float: right;
}

#sidebar{
    width: 190px;
    float: left;
}

今回は、全体の幅は800pxで固定する事としました。よって、左右にpaddingを10pxとるので#wrapperの幅は左右のpadding分を差し引いて780pxとしなければいけません。（標準準拠モードでは width 及び height に padding を含みません。）

後は、#wrapper内の#contentと#sidebarの幅を780pxに合うように変更すれば上手く段組み出来ます。

Page Top

#header内に余白を設ける

#header内の上下に20px、左右に10pxの余白とる場合

#wrapper{ width: 800px; }

#header{
  height: 80px;
  padding: 20px 10px;
}

#headerの幅は#wrapperのwidthが基準となるので特に指定は要りませんが、高さは上下に設けた余白分差し引かなければいけません。（標準準拠モードでは width 及び height に padding を含みません。）

#headerに背景画像を指定する際など重要です。

もうひとつの方法として、#header内に#header-innerを設ける方法があります。MTやWPなどのブログソフトウェアでよくある構造です。

(x)HTML

<div id="wrapper">
<div id="header">
<div id="header-inner">***データ***</div>
</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#header-inner{ margin: 20px 10px; }

Page Top

#contentと#sidebar内に余白を設ける

全体の幅は800pxで固定する事として解説します。

#contentと#sidebar共に、左右20pxのpaddingを設ける場合。

#wrapper{ width: 800px; }

#content{
    width: 560px;
    float: right;
    padding: 0 20px;
}

#sidebar{
    width: 160px;
    float: left;
    padding: 0 20px;
}

#contentと#sidebar共に、左右に20pxのpaddingを設けたので、それぞれのwidthから40px分差し引かなければいけません。（標準準拠モードでは width 及び height に padding を含みません。）

参考までに、もしwidth指定を変更しなかったら、標準準拠モードでは#contentの幅は640px、#sidebarの幅は240px、合わせて880pxと計算されます。

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

Page Top

#wrapper内に余白を設ける

全体の幅は800pxで固定する事として解説します。

#wrapperと#content及び#sidebarとの間に余白を設けたい時など、基本的にmarginで余白を設定するのは難しいと考えて下さい。IE6の場合、floatプロパティで指定した方向と同方向にmarginをとると、marginで指定した長さの2倍余白をとるバグを抱えています。よって、簡単に余白を設ける場合は次頁の余白指定：paddingを参照して下さい。

参考までにmargin指定で余白をとる場合

1：#wrapperの中にもうひとつボックス（#wrapper-inner）を設ける

(x)HTML

<div id="wrapper">
<div id="wrapper-inner">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

/* 左右に10pxとったので、実際の入力可能範囲は 780pxである事に注意  */
#wrapper-inner{ margin: 0 10px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

/* 780pxに納まるように指定  */
#sidebar{
    width: 180px;
    float: left;
}

#footer{ clear: both; }

2：#contentと#sidebarの中にもうひとつボックス（#content-innerと#sidebar-inner）を設ける

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">
<div id="content-inner">***データ***</div>
</div>
<div id="sidebar">
<div id="sidebar-inner">***データ***</div>
</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

/* 右に10pxとったので、実際の入力可能範囲は 590pxである事に注意  */
#content-inner{ margin-right: 10px; }

#sidebar{
    width: 200px;
    float: left;
}

/* 左に10pxとったので、実際の入力可能範囲は 190pxである事に注意  */
#sidebar-inner{ margin-left: 10px; }

#footer{ clear: both; }

Page Top

#header下に余白を設ける

#header{
  height: 120px;
  margin-bottom: 50px;
}

Page Top

#contentと#sidebarの間に余白を設ける

全体の幅は800pxで固定する事として解説します。

最も簡単な方法

#contentと#sidebarのwidth指定で800px以下になるように指定します。#contentはfloat:right;で右側に、#sidebarはfloat:left;で左側にいっぱい寄るので設けたい余白分、どちらかのwidthを小さくするか、あるいは両方小さくするかで自然な余白を設ける事ができます。

#contentと#sidebarの間に40px余白を設ける場合

#contentを小さくする

#wrapper{ width: 800px; }

#content{
    width: 560px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#sidebarを小さくする

#wrapper{ width: 800px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 160px;
    float: left;
}

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
両方小さくする

#wrapper{ width: 800px; }

#content{
    width: 580px;
    float: right;
}

#sidebar{
    width: 180px;
    float: left;
}

Page Top

#footer上に余白を設ける

clearプロパティが指定してある要素に、上方向のmarginを指定しても指定は反映されません。

#footer上に余白を設ける時は、#contentと#sidebarの方に下方向のmargin指定をします。

#footer上に50pxの余白を設ける場合

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
    margin-bottom: 50px;
}

#sidebar{
    width: 200px;
    float: left;
    margin-bottom: 50px;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
あるいは

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#content,
#sidebar{ margin-bottom: 50px; }

#footer{ clear: both; }

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

ヘッダー部分（#header）、コンテンツ部分（#content）、サイドバー部分（#sidebar）、フッター部分（#footer）はすべて親ボックスの#wrapperの中に包括されています。よって、ホームページ全体の横幅を変更するにはcssの#wrapper部分のwidthを変更してやります。

この時、ヘッダー部分（#header）とフッター部分（#footer）は幅指定をしていないので、今回のようにホームページ全体の横幅を変更しても、レイアウトに及ぼす影響はありません。（今回は、最も簡単でシンプルな段組を採用しています。）#wrapperのwidthに合わせて伸縮します。

コンテンツ部分（#content）とサイドバー部分（#sidebar）はwidth指定と、float指定でそれぞれ左右に配置しているので、#wrapperのwidthに合わせて変更してやらなければなりません。

Page Top

横幅計算の基本

横幅を変更する際の簡単な四則計算について説明しておきます。

仮にサンプルの横幅を760pxとした場合サンプルホームページはどうなるでしょう。この場合は#sidebarが#contentの下へ落ちてしまいレイアウトが著しく崩れてしまいます。cssソースを見ても一目瞭然で、#contentのwidthが600px、#sidebarのwidthが200px、合計で800pxなので760px内に納まるわけがありません。

横幅変更の際だけでなく、ホームページを作成する際の横幅は、基準となる要素（今回は#wrapper）の中にそれぞれの内包要素が納まるように指定しなければなりません。

今回は、各要素の余白（ margin padding ）やborder指定をしていませんが、これらの指定を加えていくと、初心者の場合、必ずと言っていいほどレイアウト崩れを起こします。その場合でも、基準となる要素内にそれぞれの要素が上手く納まるように計算するのが基本です。つまり、簡単な足算と引算が最も重要という事です。

関連：CSSレイアウト崩れの原因について

Page Top

横幅を小さくするには

横幅を小さくする（狭くする）指定について説明します。今回は#wrapperを760pxとして解説します。

基準要素の幅が760pxとなるので、#content、#sidebarのwidthを760px、もしくは760px以下に指定しなければなりません。考えるのは、#contentのwidthを小さくする、あるいは#sidebarのwidthを小さくして、#contentと#sidebarのwidthの合計が#wrapperのwidth:760px;と同等か、あるいは760px以下になるように計算する事です。以下は、横幅を小さくする（狭くする）際のcssサンプルの一例です。

#contentの幅を変更のパターン

#wrapper{ width: 760px; }

#header{ height: 120px; }

#content{
    width: 560px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#sidebarの幅を変更のパターン

#wrapper{ width: 760px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 160px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#content #sidebarの幅を変更のパターン

#wrapper{ width: 760px; }

#header{ height: 120px; }

#content{
    width: 580px;
    float: right;
}

#sidebar{
    width: 180px;
    float: left;
}

#footer{ clear: both; }

Page Top

横幅を大きくするには

横幅を大きくする（広くする）指定について説明します。今回は#wrapperを860pxとして解説します。

基準要素の幅が860pxとなるので、サンプルの指定のままでは#contentと#sidebarの間に60pxの空白が生じてしまいます。（これは実際には、レイアウトを崩さない為の指定テクニックです。）よって#content、#sidebarのwidthを860px、もしくは860px以下になるように指定します。考えるのは、#contentのwidthを大きくする、あるいは#sidebarのwidthを大きくして、#contentと#sidebarのwidthの合計が#wrapperのwidth:860px;と同等か、あるいは860px以下になるように計算する事です。以下は、横幅を大きくする（広くする）際のcssサンプルの一例です。

#contentの幅を変更のパターン

#wrapper{ width: 860px; }

#header{ height: 120px; }

#content{
    width: 660px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#sidebarの幅を変更のパターン

#wrapper{ width: 860px; }

#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 260px;
    float: left;
}

#footer{ clear: both; }

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#content #sidebarの幅を変更のパターン

#wrapper{ width: 860px; }

#header{ height: 120px; }

#content{
    width: 640px;
    float: right;
}

#sidebar{
    width: 220px;
    float: left;
}

#footer{ clear: both; }

floatレイアウトの基本は、上記のように親ボックスの中で左右に配置させたい子ボックスをfloat指定により回り込ませ、最後に回り込みを解除するのが最も簡単な段組です。では、親ボックスと子ボックスを実際の作成例に沿って置き換えてみます。

まずそれぞれの要素（div要素）を用意します。

(x)HTML

<div></div> <!-- 親ボックス -- >
<div></div> <!-- 子ボックス -- >
<div></div> <!-- 子ボックス -- >
<div></div> <!-- 子ボックス -- >
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
親ボックス内に子ボックスを配置するので
<div> <!-- 親ボックス -- >
<div></div> <!-- 子ボックス -- >
<div></div> <!-- 子ボックス -- >
<div></div> <!-- 子ボックス -- >
</div> <!-- 親ボックスの終わり -- >

Page Top

idセレクタ名をつける

上記サンプル図のボックスに、それぞれ任意のセレクタ"名をつけます。セレクタ名は一目でわかる言葉（単語など）を指定します。ここでは下記のように指定します。

• 親ボックス(div)を wrapperとする。
• ひとつ目の子ボックス(div)を contentとする。
• ふたつ目の子ボックス(div)を sidebarとする。
• 最後の子ボックス(div)を footerとする。

上記の条件で、サンプル図の解説分を読み替えてみます。

wrapper内でcontentとsidebarを左右に配置。
wrapper内で回り込みを解除（footer）。という事になります。

(x)HTML

<!-- wrapper内に各要素（ボックス）を配置 -->
<div id="wrapper">
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css
#wrapper{ 各種指定 }
#content{ 各種指定 }
#sidebar{ 各種指定 }
#footer{ 各種指定 }

Page Top

CSS指定/レイアウトを考える

実際に各要素のCSS指定をしていきます。

まず最初に考える事は、全体の幅（width）をどうするかです。固定幅にするのか、可変幅（リキッドレイアウト）にするのか、コンテンツ部分の幅（width）、サイドバーの幅（width）、右サイドバータイプ、左サイドバータイプなどを考えます。ここでは以下の条件で指定していきます。

• 全体の幅（#wrapper）を800pxの固定幅とする。
• 左サイドバータイプとする。
• コンテンツ部分の幅（#content）を600pxとする。
• サイドバー部分の幅（#sidebar）を200pxとする。

css

#wrapper{ width: 800px; }

#content{
    width: 600px;
    float: right;  /* 右に配置 */
}

#sidebar{
    width: 200px;
    float: left;  /* 左に配置 */
}

#footer{ clear: both; }  /* float解除 */

ワンポイント

右サイドバータイプにする場合、上記の#contentと#sidebarのfloat指定を逆にします。CSS指定で左右の変更が簡単に出来るのがCSSレイアウトのメリットです。

右サイドバータイプにする場合の別の方法として、単に#sidebarのfloat指定をleftにしても良いのですが、#contentと#sidebarのfloat指定は左右別々にした方が、レイアウト上でかなり融通がききます。

右サイドバーにする時のCSSソースサンプル

css

#content{
    width: 600px;
    float: left;  /* 左に配置 */
}

#sidebar{
    width: 200px;
    float: right;  /* 右に配置 */
}

Page Top

ヘッダーを追加する

ホームページらしく、ヘッダー部分を追加します。今回ヘッダー部分は#headerとします。指定は簡単で#wrapper内に#headerを挿入するだけです。

(x)HTML

<div id="wrapper">
<div id="header">***データ***</div>
<div id="content">***データ***</div>
<div id="sidebar">***データ***</div>
<div id="footer">***データ***</div>
</div>
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
css

#wrapper{ width: 800px; }

/*
高さだけ指定しています。
#headerの幅は指定しなくても#wrapperのwidth分広がります
*/
#header{ height: 120px; }

#content{
    width: 600px;
    float: right;
}

#sidebar{
    width: 200px;
    float: left;
}

#footer{ clear: both; }