floatを使用して複雑なレイアウトを作ろうとする場合、ブラウザの種類や幅といった環境になるべく左右されないようなスタイルを組む必要があります。
ただしウィンドウ幅に関しては、幅が狭くなるとボックスが左右でなく上下に並ぶ（回り込みが解除される）方が横スクロールで見なくて済むので便利だ、という考え方もあります。自分の見せたいデザインと閲覧側の利便性、両方を考えてレイアウトを選択してください。
そのために必要な記述などを説明します。
環境によるずれをできるだけ少なくするため、以下の指定をしておきます。
最初に記述するdoctypeを下のように書き換えます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
追加するのは"http://www.w3.org/TR/html4/loose.dtd"の部分です。
この部分が無い場合、cssの記述間違いをブラウザ側で補完し、ある程度正しく表示するかわりに、仕様に準拠していても意図しない表示に変えられてしまう場合があります（quirksモード）。
この部分を追加すると（たいていのブラウザでは）誤った記述は無視される代わりに、仕様に準拠した表示になるstandardモードになります。
standardモードにすることでブラウザによる表示の違いをある程度防ぐことができます。
cssに以下の指定を追加します。
* { margin: 0; padding: 0;}
*は全称セレクタといい、すべてのhtmlタグに対する指定です。ここで、margin、paddingともに0にしておきます。
margin、paddingを指定しないと、ブラウザが自動的に余白を設定します。余白をとる幅はブラウザによって異なるので、0にすることで環境によるずれなどを防ぐ効果があります。
ただ、レイアウトに関係ないブロックもすべて余白が無くなるので、余白が必要なブロックには改めて余白を指定する必要があります。
例：前ページの余白を* {margin: 0;padding: 0;}で消すとこうなります。
floatやclearを指定したブロックに余白を指定すると不要な隙間やエラーが生じます。それを防ぐためにfloatやclearを指定したブロックの中に余白を指定したブロックを入れます。
floatを指定する余白の無いブロック↓
内容を記述するブロック。外側のfloatを指定するブロックと内容ブロックとの間にある余白は、内容ブロックのmargin（外側の余白）として指定したものです。この（margin: 20px;を指定。）
基本的にはfloatやclearを指定する外側のブロックにはdivを利用し、その中に入るpやol、ul、tableに余白を指定する、という形になります。
また、divにはborderの指定ができません。borderが指定できるブロックでもwidthと同時に指定するとエラーが生じます。そのため、borderも余白と同様、中に入るブロックの側に指定します。
ブラウザ幅に依存しないレイアウト本体の指定方法はこちら