少し難しいですが、
細かく説明をすると、
floatというのは、一つ目のボックス右端の辺と
次のボックスの左端の辺がくっついて続けて表示されるものです。
ただ、この右端の辺の位置はネガティブマージン（マイナス設定のマージン）で変更することができます。

今回は、
#l_naviでmargin-right: -200px;にしていることにより、
実際のボックス#l_naviの右側の辺を左側の辺と同じ位置に移動しています。
これにより、#l_naviと#content_innerが重なっている状態になります。
そのため、コンテンツがかぶってしまうので#l_naviの横幅分、#content_innerをずらします。
それが、
#content_innerでmargin: 0 200px;
になります。

#r_sideも同じです。
#r_sideでmargin-left: -200px;を設定することにより
floatで並べます。
ただ、重なってしまうので
#content_innerでmargin: 0 200px;がされています。
#content_innerが左右にmarginの設定をしている理由です。

少し難しくなってしまいましたね。
スクールでは、このようなマージンやfloatの設定について学習できる講座もご用意しています。
詳しくはこちらをご覧ください。
http://www.isa-school.net/web_dtp/index.html