前の項目ではヘッダー、コンテンツ、フッターの３つの枠を作成しましたが、ここではコンテンツの中にメインとメニューの２つの枠を作成したいと思います。

HTMLファイル、CSSファイルに以下のように記述します。
「float」で回り込みの設定を行っています。
ここでは、メインを左寄せ、メニューを右寄せにしていますが、逆にしたい場合は「float」の値を変更するだけでOKです。

実はこれがスタイルシートデザインのメリットでもあります。
HTMLファイルの中身を変えずにCSSを変えるだけで左右の入れ替えが可能なのです。
メインの<div>を先に書いている場合でも、メインを右側に寄せることが出来ます。

検索エンジンのロボットはHTMLファイルの上からデータを採取するので、これはSEO対策に有効ですね。

また、footerで「clear:both;」を使って回り込みを解除しています。
これを指定しておかないと、レイアウトが崩れることがあるので注意して下さい。

ここで作成した枠組みは以下のようなイメージになります。
※分かりやすいように適当な余白を設定してあります。