文章改訂（7月12日午前）。
CSSのfloatを使ってよくあるレイアウトを実現する。出来上がりサンプル参照。ソースはサンプルファイル本体を参照してくだされ。
floatを使ってレイアウトに挑戦といっても、実際やろうとするといろんなところでつまづく。けっきょく、floatを使う場合はいつも行き当たりばったりになってしまい、CSSなんて嫌いだ！ということになりかねないので、どういうことに気をつけるべきかをチェックしていく。なので題して「floatレイアウトで（できるだけ）つまづかないためのTips」。
対象は、WindowsのIE, Mozilla, Operaの最近のやつ。ちなみに、MacのSafariではうまくいったがIE5ではこけた（要対策）。使用するHTMLはXHTML 1.0 Strict、XML宣言あり。よって、IE6では後方互換モードになり、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（後方互換モード）対策。これを覚えておくとトラブルに巻き込まれることがグッと減る。borderを使いたいときには、横着せず背景画像を用意すること。見た目もよくなるし。
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を入れないとMozillaではまる。
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を指定する。
なお、menuのほうがmainより長い場合を参考としてあげる。見た目を考えると、containerにうまく背景画像を指定するのが一番楽なように思える。
CSSのfloatレイアウト徹底攻略とかいうタイトルにした方がインパクトがあってよかったかも。
ちょっちブロギの方を position から float に移行（?）しようかなあ。
Movable Type 3.0も出てきたんで、そろそろfloatかなあ、という皆様のために特集（？）組んでます。自分もそう考えているひとりだったりしますが。
floatレイアウトでつまづかないためのTips 参考になったのがADPのこの...
ええと、この話は2カラム化に限った話じゃないんですけど、もとつきせんせいが知りた...
ボックスにwidthを指定しなければならない理由は何ですか？
ご質問ありがとうございます。ボックスにwidthを指定しなければならない理由は、http://altba.com/bakera/hatomaru.aspx/ebi/topic/472 らへんの話題だと認識しています。
大変参考になりました。 唐突ですが、質問があります。「containerにfooterを入れないとMozillaではまる。」とはどういうことでしょうか？ 「container」の外に「footer」を置いても、問題なく表示されるのですが。
ようやく正解が見つかった気がします。単純な２カラム のレイアウトでも、IE用には完璧でもMZ系だと重なり 合ってしまったり…と、今週は散々でした。ですが、こ のサイトでの勧めに従って、基準BOXからの相対配置 レイアウトは止めて、フロート配置レイアウトに切り替え ようと思います。これで、少しマシなものが出来上がる でしょう!?とまれ、ありがとうございました。 m(_ _)m
タグ、改行、ともに適用されません（たぶんそのまま）。