簡単に2カラムのレイアウトを作ってみました。

□ HTML

□ CSS

□ デザイン 


ここで実は反映されていない色（ボックス）があるのに気づくと思います。
それぞれfloatで左右に振ったnavとcontentを囲んだmainです。
ここに、バックグランドとしてyellowを設定していますが、これが出てきていません。

実は、floatを指定したボックスはその上のボックスからは無いものと判断されてしまいます。
今回の場合はmain内にnavとcontentがあって、その両方ともにfloatの設定をしているので、
mainの中が何もないと判断されて高さが0になってしまっているのです。

これを解決させる方法は3つ考えられます。

まず、mainに高さ（height）を設定する方法。

これが理論的には一番わかり易いですが内包されているnavやcontentの高さが変わってきたときにそれに合わせてmainの高さも設定しなければならないのがちょっと良くありません。

そして、mainにoverflow:hiddenと設定する方法。

これはoverflowプロパティの特性を利用したなかなか便利な方法。
でも、overflowというプロパティがなくなってしまうと困る（まあ、そんなことはないと思いますが。）
□ とっても使えるoverflowプロパティ。その使い方色々。 - CSS HappyLife

最後に、main自体にfloatを指定する方法。

これが個人的には一番オススメです。
理論的にも分かりやすいしfloatで生まれた問題はfloatで解決させるに限ります。
つまり、親要素自体にも「float:left」（もしくはfloat:right）と指定してあげればOK。
実は別記事で解説しますがpositon:absoluteにおける問題点も親要素にpositionを設定することで解決します。
これと合わせて、覚えておくと分かりやすい。

ということで、CSSを以下のように書けば解決します。

□ CSS

□ デザイン


書き足した部分を赤字にしました。