CSSレイアウト[本文2段組のレイアウト-4]2段組にする
メインのスペースを、いよいよ2段組に分ける。
float:で左右に割り振る
複数のボックスを横に配置するには「float:」を使う。「float:」は、適用した要素を左または右の位置に配置して、HTML上でその後に記述された要素が反対側に回り込む。
ここでは、「side」と「main」というボックスを作り、「float:」を使って2つを横に並べる。
width:630px; ←メインの横幅
float:right; ←右に寄せる（他の要素を左に回り込ませる)
margin: 0px;
}
#side {
width:170px; ←サイドの横幅
float:left; ←左に寄せる
margin: 0px;
}
<html>
<head>略</head>
<body>
<div id="header">
<div id="headervisual">
<div id="headspace">
<div id="headttl">
<h1><a href="../index.html">グラフィックデザイナーのための、CSSレイアウトメモ</a></h1>
<!-- END headttl --></div>
<!-- END headspace --></div>
<!-- END headervisual --></div>
<!-- END header --></div>
<div id="outline">
<div id="main"> ←メインを先に持ってくる
ここに本文が入る
<!-- END main --></div>
<div id="side"> ←メインが終わってからサイドを記述
ここにサイドメニューが入る
<!-- END side --></div>
<div class="c-both"></div> ←これは[7]フッターを作るで解説
<!-- END outline --></div><!-- END outlinebg --></div>
<div id="hooterbg"></div>
</body>
</html>
注目はHTML上で「main」ボックスを先に（上に）記述していること。
HTMLだけでは先に（上に）記述したものから左に配置するが、この場合「main」に float:right 指定があるので、HTMLで「main」が前に記述されても、レイアウトは右側に来る。
サイト上、重要な内容となる記述を先に持ってきて、毎ページ同じ内容になるメニュー等はHTMLの後半に書く事が出来る。HTMLの編集時にも便利で、SEO向けや、音声読み上げソフトへの対応もこのほうが良い。
上記のHTMLでブラウザ表示はこのようになる。
float:で左右の入れ替えも簡単
メニューを右側に置きたい場合は「side」と「main」の配置を入れ替えるわけだが、CSSを使うとこれが簡単に行える。現在は「side」には「float:left;」、「main」には「float:right;」の指定をしているが、CSS上でこのfloat:のleftとrightを書き換えるだけ。HTMLファイルをいじる必要は無い。