2カラムレイアウト − clear指定は忘れずに
2カラムレイアウトもおおよそ出来上がりましたが、最後の仕上げが待っています。それが「clear」による「左右の回り込みの解除」です。
この解除指定を行わない場合、外枠がうまく内枠の下まで伸びていかないなど、崩れの原因になりますので、忘れずに指定するようにしましょう。この解除指定はCSSでレイアウトした全てのページで使いますので、外部ファイルで指定しておくと便利です。
HTMLの記述
<div id="outline">
<div class="header">
タイトルなど
</div><!-- end header -->
<div class="outline-marign">
<div class="main">
メインスペース
</div><!-- end main -->
<div class="side">
サイド
</div><!-- end side -->
</div><!-- end outline-marign -->
<div class="footer">
コピーライトなど
</div><!-- end footer -->
</div><!-- end outline -->
<div id="outline">
<div class="header">
タイトルなど
</div><!-- end header -->
<div class="outline-marign">
<div class="main">
メインスペース
</div><!-- end main -->
<div class="side">
サイド
</div><!-- end side -->
<div class="c-both"><br></div>
</div><!-- end outline-marign -->
<div class="footer">
コピーライトなど
</div><!-- end footer -->
</div><!-- end outline -->
CSSの記述
body { text-align:center; }
#outline {
width:750px;
text-align:left;
margin:0 auto;
}
.outline-margin { margin:0 10px; }
.main { width:480px; float:right; }
.side { width:260px; float:left; }
ブラウザ上の表示
（分かりやすくするため、高さ、色、枠線をつけています）
body { text-align:center; }
#outline {
width:750px;
text-align:left;
margin:0 auto;
}
.outline-margin { margin:0 10px; }
.main { width:480px; float:right; }
.side { width:260px; float:left; }
.c-both { clear:both; }
ブラウザ上の表示
（分かりやすくするため、高さ、色、枠線をつけています）
これで2カラムCSSレイアウトの作成は終了です。
もし、内枠がうまく左右に寄らない場合には、メイン・サイドのスペースを若干縮めるなど、微調整を行ってください。
また、左右の位置を入れ替えたい場合は、「.main」「.side」の「right」「left」を入れ替えるだけで簡単に変更することが可能です。