まずは実際にこんな形をhtmlで作ってみながら説明します！
昔はレイアウトと言えばTABLEタグでしたから、TABLEで組むとしたら、こう区切ります。
簡単に言うと縦が３行。
横は一番多い真ん中の行が５列あるので、３×５の表をつくればいいわけです。
で上下の列は統合ですね。
古き良き
テーブルですが、まー分かりづらいですよね。行がぁ、３つでぇ、colとrowってどっちが縦だっけ？とか。
ソースも長く複雑なので、コンテンツの更新がしにくくてしょうがない。
これどこだっけ、あれ違うセル変えちゃった！とかね・・
もうそんなものは使いません。
いくら趣味のサイトだからって、TABLE使ってもいい事ありません。（あるけどまたそれは今度。）
某ビルダーは卒業しよう！cssでレイアウト組んでみよう！
そして、cssの勉強始めると最初に目に止まります。このfloatで組む方法。
超簡単に言うと、大きい箱に入れた小さい箱がfloat:leftなら左、float:rightなら右に入ります。
大きい箱（div）の名前（id）がboxって名前。
小さい箱（div）の名前（id）がそれぞれhidariちゃん、migiちゃんだとして、実際に組むと。
<div id="box">
<div id="hidari">ああああ</div>
<div id="migi">まままま</div>
</div>これだけです。すごいスッキリですよね。
さらにcssで、どれくらいの大きさの箱なのか、どの位置に置くのかを名指しで命令します。
#box {width:320px; height:240px; background-color:#ffff66;}
#hidari {float:left; width:145px; height:220px; background-color:#ff66cc;}
#migi {float:right; width:145px; height:220px; background-color:#339933;}boxさんには横幅と縦幅を指定。
hidariちゃんとmigiちゃんには、floatで位置指定と、余白が10pxなので引き算で計算し、横幅を145px、縦幅を220pxにして！と命令。
さらに、左をピンク、右を緑にしました。
ここでレイアウトはこんな感じになります。
見事に左右に分かれましたねぇ。
ちなみにここで、
#hidari {float:left; width:145px; height:220px; background-color:#ff66cc;}
#migi {float:left; width:145px; height:220px; background-color:#339933;}
にすると、こうなります。
cssどこが違うかわかりますか？migiちゃんもfloat:leftになっているので、左に寄ってぴったりくっついているのです。
とても簡単ですよね
一つ注意としては、必ずfloatさせたら横幅widthは指定しましょう。
横にテキストが伸びると、箱が膨張して下に落ちるのです。（カラム落ち）
はみ出しちゃうってことですね。
まーでも簡単簡単。これでどんなページでも作れちゃうぜ！
なんて思ったら大間違いなのですよ
floatは実は一番重要なのに、本当にタチが悪いんです！
という事で、背景に色をつけたり余白の話は次の記事で。
→簡単そうで覚える事の多い、クセ者floatの話 2日目に続く
お子様もfloat!float!
