親ボックス内で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; }

floatに関する指定について

以下はfloat指定の際の注意項目です。確認してみて下さい。

width指定をしていない。

すべてのブラウザで起こるわけではありませんが、Mac IE5ではfloat指定の際widthも指定しなければ回り込みが上手く反映されません。

widthを指定する事は、余白を設定する場合やリンク領域を要素全体に広げたい際にも重要になります。普段から記述する事をお勧めします

floatを指定した同方向にmarginを指定している。

サンプル

#sample{
float: left;
width: 180px;
margin-left: 20px;
}

IEではfloatと同方向にmarginを取ると、幅が2倍で表示されます。

widthの計算。

• 全体の幅を超えていないか
• 余白分差し引いているか
• border分差し引いているか

以下のCSS指定サンプルではレイアウトは崩れます

#wrapper{ width: 700px; }

#content{
    width: 500px; /* この場合なら 489px */
    float: left;
    margin: 0 10px 0 0;
    border-right: 1px solid #000;
}

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

#footer{ clear: both; }

標準準拠モードと後方互換モードに関する部分です。詳細はCSSレイアウト崩れの原因についてで確認して下さい。

どの文書型定義（DTD）に従って記述しているかを明確にします。以下はDTDとレタリングモードの一覧です。

XML宣言について

上記レタリングモード一覧にもあるように、IE6ではXMLを宣言すると強制的に互換モード表示になります。CSS側での対応も可能ですが、現状ではXMLを宣言しない方が（記述しない）望ましいです。

この項目はレイアウト崩れにはあまり関係がありませんが、この項目も(X)HTMLの見直しと同様に基本的な部分であり、CSSの指定が反映されない時などは、下記のパターンが大半です。

• id or classの記述ミス
• セレクタ名の記述ミス

id or classの記述ミス

例えば、(X)HTML側で<div id=”sample”>としているにも関わらずCSS側では.sampleとしている。

セレクタ名の記述ミス

例えば、(X)HTML側で<div id=”sidebar“>としているにも関わらずCSS側では#left-sidebarとしている。

例えば、(X)HTML側で<div id=”left-sidebar“>としているにも関わらずCSS側では#left_sidebarとしている。

初歩的なミスですが、実際この手の記述ミスは案外多いものです。

CSSのプロパティ等についての知識が豊富でも、肝心な(X)HTMLの記述がおろそかでは何の意味もありません。ウェブ標準仕様に従うのであれば、(X)HTMLの正確なマークアップと正しい使い方をしなければなりません。

CSSの指定を調べる前に、(X)HTMLの記述が正しく行われているかを確認しましょう。

• IEでは上手く表示しているのに、Firefoxで表示したらサイドバーが落ちていた。
• IE6では上手く表示しているのに、IE7で表示したらサイドバーが落ちていた。
• Macで表示したらレイアウトが崩れていた。

CSS指定によるレイアウト崩れの原因については、さまざまな要因が考えられますが、基本は(X)HTMLのマークアップが正しく記述されているかを最初に確認しておきましょう。

以下のレイアウト崩れに関する解説は、CSSハックの解説ではありません。IE7の登場によりIE6で使用可能だったハックがIE７では無効となるように、ブラウザ側の対応も次第に改善方向に向かいます。ハックは取り敢えずの処置と考え、CSS指定の基本を理解しましょう。

ボックスモデルの概念

レイアウトの場合だけでなく、<div> <h1> <img>等の各要素にもCSS指定をしますが、これらの各要素はすべてボックスという概念を持っています。

CSS指定でのレイアウト崩れの原因の多くは、上記サンプル図の padding と border によるところが大半です。

標準準拠モードと後方互換モード

標準準拠モードと後方互換モードのCSS解釈の違いについて解説します。

表示モードについて

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

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

簡単なサンプルとして下記のような指定をした場合、

div.sample{
    width: 400px;
    padding: 20px;
    border: 10px solid #000;
}

後方互換モードは width 及び height に padding 及び border を含むので幅は400pxです。

標準準拠モードは width 及び height に padding 及び border を含まないので下記サンプルのようになります。

上記のように、CSSで指定した width:400px; はcontent領域(データ領域)の幅を意味します。つまり、上記サンプル指定では、content領域(データ領域)が400px、paddingが左右で40px、borderが左右で20px、合計460pxがdiv.sampleの横幅になります。尚、今回、高さについては無視していますが基本は同様です。

標準準拠モードでwidth:400px;にする場合は下記のように指定します。

全体の幅を400pxとしたいので、400pxからpadding:20px;（左右で40px）とborder:10px;分（左右で20px）を差し引いたものがwidthとなります。

関連情報：DOCTYPE宣言とレタリングモード表

標準準拠モードによるwidth指定サンプル1

実際の指定にありうるパターンで解説します。

• サイドバー部分200px（#sidebarとする）
• 余白を左右に10px（今回はpaddingとする）

#sidebar{
    width: 180px;
    float: right (or left);
    padding: 0 10px;
}

表示上での幅は200pxですが、実際に#sidebar内に記述できるのは180pxという点に注意。180pxを超えるバーナーやイメージ画像等を入力するとサイドバーがもしくは本文部分が落ちます。

標準準拠モードによるwidth指定サンプル2

ウェブサイトの段組みを例にしてみます。

• 全体の幅を700px（#wrapperで包括）
• 記事部分を500px,左寄せ（#contentとする）
• 記事部分の余白を左右に10px（今回はpaddingとする）
• 記事部分の右側にborder（1pxとする）
• サイドバー部分200px,右寄せ（#sidebarとする）
• 余白を左右に10px（今回はpaddingとする）

#wrapper{ width: 700px; }

#content{
width: 479px;
float: left;
padding: 10px;
border-right: 1px solid #000;
}

#sidebar{
width: 180px;
float: right;
padding: 10px;
}

#footer{ clear: both;}

標準準拠モードは width 及び height に padding 及び border を含まないので、borderの1px分も差し引きます。