floatプロパティでレイアウトを配置する

CSSのfloatプロパティを活用することでHTMLの要素を縦横に自在に配置してページのレイアウトを決めることができます。
今回は要素を3つ並べた3カラムのレイアウトをfloatを用いて作りました。
カラムとは縦方向に並ぶ列の数の単位で表計算ソフトの列の数にも用いられます。





content1はヘッダー（タイトルなどを表示する領域）として作成しているのでfloatは用いません。

content2、content3、content4はメニューなどを表示できそうな領域として作成しました。
floatを用いて配置しています。

content5、content7、content8はサイドバー（サイトマップやページの情報、他のページへのリンクなどを配置する領域）、content6はメインコンテンツとして作成しています。
floatを用いて配置していますがcontent7、content8の二つは縦方向に重ねて表示するようにしています。この方法としてそれぞれのcontentのclassのCSSでfloatを用いるのではなく、別にfloatを適用するclass（float78）を作りそれを適用させてcontent7、content8をまとめて配置しています。もちろんこの方法は他のcontentにも用いることができます。

content9はフッター（他のページと同じ定型的な情報や関連ページへのリンクを表示する領域）として作成しているのでfloatは用いずにそのまま配置します。