IE7対応もかねて改訂（2006年9月12日）。
CSSのfloatを使ってよくあるレイアウトを実現する。出来上がりサンプル参照。ソースはサンプルファイル本体を参照してくだされ。
floatを使ってレイアウトに挑戦といっても、実際やろうとするといろんなところでつまづく。けっきょく、floatを使う場合はいつも行き当たりばったりになってしまい、CSSなんて嫌いだ！ということになりかねないので、どういうことに気をつけるべきかをチェックしていく。なので題して「floatレイアウトで（できるだけ）つまづかないためのTips」。
対象は、WindowsのIE, Mozilla, Operaの最近のやつ。使用するHTMLはXHTML 1.0 Strict、XML宣言あり。よって、IE6では後方互換モードになり、IE7やMozillaやOperaでは標準準拠モードになる。つまり、あくまで標準準拠なやりかたでやってIE6にも対応させる。転用するときは、ゆるいほうにかえてもいいっす。
できるだけ、特定のブラウザを狙い撃ちですーってすぐわかってしまうような汚いhackは使わないようにする。
よくあるレイアウトとして、以下のものを考えてみた。
幅は780ピクセル固定 全体をセンタリング 上段にタイトル（id="title"） 中段はメニュー（id="menu"）と本文（id="main"）、メニューは左 メニューの幅は240ピクセル固定 メニューと本文の間は10ピクセル分 下段にフッター（id="footer"）
応用範囲を広げるため、すべてにdivをかませる。
以下Tips。
1. はじめにデフォルトスタイルシートの影響を減らすため、すべての要素のmarginとpaddingを0にしておく。
* {
margin: 0;
padding: 0;
}ブラウザによって、いろいろデフォルトスタイルが違うので、はじめに0にあわせておき、使う要素に応じてあとで個別に変更する。
2. セレクタに対してwidthとpaddingを同時に指定しない。
これは、Windows IE6（後方互換モード）対策。
#title {
width: 780px;
height: 100px;
background-color: #c2c2c2;
}
h1 {
padding: 8px;
}横幅をピクセルで固定したいときにはwidthとpadding (left or right) を同時に指定しない。これを覚えておくとトラブルに巻き込まれることがグッと減る。余白が欲しいときには、それよりも下位の要素にpaddingかmarginを指定する。どうしようもなければdivをもう一度かましてそれに指定する。
3. ピクセル単位であわせなければならない場所にはborderを使わない。
これも、Windows IE6・IE7対策。これを覚えておくとトラブルに巻き込まれることがグッと減る。borderを使いたいときには、横着せず背景画像を用意すること。見た目もよくなるし。詳しくは、ADP: ピクセル単位で合わせるところではborderを使わない（IE7でも！）を参照。
4. センタリング。
これは、IE6（後方互換モード）用にモロバレhackをかます。
body {
text-align: center;
}
body div {
text-align: left;
margin: 0 auto;
}5. menuとmainにfloat: leftとwidthを指定する。
HTMLソース上menuが先で、見た目上menuを左に持っていきたい場合。それぞれにwidthを設定する（必須）。2.で書いたとおり、padding (left or right)はmenuやmainには指定せず、その下位の要素に対して指定する。
6. footerにclear: bothを指定する。
フッターを作るため。ここでも、widthを指定しておく（IE6対策）。
7. containerをつくらないとうまくセンタリングされない。
menuとmainは、containerのようなdiv要素に含ませないとうまくセンタリングされない。
8. containerにfooterを入れる。
footerまでcontainerに入れないとcontainerの高さが確保されない。けっきょく
<div id="container">
<div id="menu"></div>
<div id="main"></div>
<div id="footer"></div>
</div>なかんじにmenu, main, footerをcontainerに含ませる。
9. 先にfloat: leftをしたボックスのmargin-leftや、先にfloat: rightをしたボックスのmargin-rightは指定しない（2004年12月9日書き換え）。
IE6ではまる。詳しくは、ADP: フロートとマージンを参照のこと。余白が必要な場合は、ボックスの中の要素にmarginかpaddingを指定する。
10. title, menu, main, footerに上margin、下marginを指定しない。
上下のマージン関係で大量にバグが潜んでいる。余白が必要な場合は、paddingを指定する。
なお、menuのほうがmainより長い場合を参考としてあげる。背景を指定する際には、containerに指定する。そうすればメニューと本文のどちらが長くなっても安心だ。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/249
CSSのfloatレイアウト徹底攻略とかいうタイトルにした方がインパクトがあってよかったかも。
ちょっちブロギの方を position から float に移行（?）しようかなあ。
Movable Type 3.0も出てきたんで、そろそろfloatかなあ、という皆様のために特集（？）組んでます。自分もそう考えているひとりだったりしますが。
ボックスにwidthを指定しなければならない理由は何ですか？
ご質問ありがとうございます。ボックスにwidthを指定しなければならない理由は、http://altba.com/bakera/hatomaru.aspx/ebi/topic/472 らへんの話題だと認識しています。
大変参考になりました。
唐突ですが、質問があります。「containerにfooterを入れないとMozillaではまる。」とはどういうことでしょうか？
「container」の外に「footer」を置いても、問題なく表示されるのですが。
ようやく正解が見つかった気がします。単純な２カラム
のレイアウトでも、IE用には完璧でもMZ系だと重なり
合ってしまったり…と、今週は散々でした。ですが、こ
のサイトでの勧めに従って、基準BOXからの相対配置
レイアウトは止めて、フロート配置レイアウトに切り替え
ようと思います。これで、少しマシなものが出来上がる
でしょう!?とまれ、ありがとうございました。 m(_ _)m
containerに背景色を指定すれば理由がわかると思います。
＞＞「containerにfooterを入れないとMozillaではまる。」
CSSでなやんでたずれが解決。ありがとうございました。
cssで一番苦戦していたfloatが分かりやすく説明されていて、とても参考になりました。これからも頑張って更新を続けて下さい。
ちょうどMozilla系のfloatではまっていたところ、大変助かりました。ありがとうございました。
ｘｍｌ宣言をするとIE6.0で互換モードになってしまい、レイアウト崩れるのにずっとなやんでましたが、なんのことはない、ものすごく簡単なhackで解決できたんですね、助かりました。ありがとうございます