多段レイアウト

2カラム

上下にheaderとfooterを配置し、subとmainの2つのコンテンツを左右に並べる場合を考えます。

header
sub
main main main main main main main main main main main main main main main main main main main main main

まずmainを右に寄せるためにsubにfloat:leftを指定し、その幅を確定するためにwidthを指定します。

<div>header</div>
<div style="float: left; width:30%">sub</div>
<div>main</div>
<div>footer</div>
header
sub
main main main main main main main main main main main main main main main main main main main main

ボックスの右下にリサイズハンドルが表示されているならば、それをドラッグすることでボックスの大きさを変更できます。

mainがsubの下に回り込んでしまうため、mainにもfloat:leftを指定してみます。

<div>header</div>
<div style="float: left; width: 30%">sub</div>
<div style="float: left; width: 70%">main</div>
<div>footer</div>
header
sub
main main main main main main main main main main main main main main main main main main main main

floatを、leftではなくrightにしてみます。

<div>header</div>
<div style="float: left; width: 30%">sub</div>
<div style="float: right; width: 70%">main</div>
<div>footer</div>
header
sub
main main main main main main main main main main main main main main main main main main main main

floatではなく、margin-leftでsubの領域を確保してみます。

<div>header</div>
<div style="float: left; width: 30%">sub</div>
<div style="margin-left: 30%">main</div>
<div>footer</div>
header
sub
main main main main main main main main main main main main main main main main main main main main

一見これで問題がないように見えますが、subの高さがmainのそれを超えると、footerがsubの右に回り込んでしまいます。

header
sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub
main

これにはfooterにclearを適用し、floatによる影響を解消することで対処できます。

<div>header</div>
<div style="float: left; width: 30%">sub</div>
<div style="margin-left: 30%">main</div>
<div style="clear: left">footer</div>
header
sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub
main

またはコンテンツを囲むコンテナを用意し、それにoverflowでvisible以外の値を指定します。floatは同一のブロック整形文脈にしか影響しないため、こうすることでもfloatの影響を解消できます。

<div>header</div>
<div style="overflow: hidden">
    <div style="float: left; width: 30%">sub</div>
    <div style="margin-left: 30%">main</div>
</div>
<div>footer</div>
header
sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub
main

左右のコンテンツの入れ替え

mainをsubより先に記述した状態で、前項と同様にmainを右に寄せるレイアウトを考えます。

header
main main main main main main main main main main main main main main main main main main main main main
sub

これには先ほどとは逆で、mainをfloat:rightとして右に寄せます。

<div>header</div>
<div style="overflow: hidden">
    <div style="float: right; width: 70%;">main</div>
    <div>sub</div>
</div>
<div>footer</div>
header
main main main main main main main main main main main main main main main main main main main main main
sub

ただしこの状態では、subの高さがmainのそれを超えると、subがmainの下に回り込んでしまいます。

header
main
sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub

これはsubにmargin-rightを指定して、mainの領域を確保することで解消できます。

<div>header</div>
<div style="overflow: hidden">
    <div style="float: right; width: 70%;">main</div>
    <div style="margin-right: 70%">sub</div>
</div>
<div>footer</div>
header
main
sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub

またはsubにwidthを指定し、その幅を確定させる方法もあります。

<div>header</div>
<div style="overflow: hidden">
    <div style="float: right; width: 70%;">main</div>
    <div style="width: 30%">sub</div>
</div>
<div>footer</div>
header
main
sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub sub

一方のコンテンツの幅を固定

ウィンドウ サイズの変更などにより、コンテンツを含む領域のサイズが変更される場合を考えます。

左側を固定

左側のコンテンツの幅を、割合ではなくpxなどの単位で指定するだけです。

<div>header</div>
<div style="overflow: hidden">
    <div style="float: left; width: 100px">sub</div>
    <div style="margin-left: 100px">main</div>
</div>
<div>footer</div>
header
sub
main

ボックスの右下にリサイズハンドルが表示されているならば、それをドラッグすることでボックスの大きさを変更できます。

右側を固定

まずfloat:rightで右に寄せ、その幅をpx単位で固定します。そして左に配置するコンテンツを囲むコンテナを用意し、それの右マージンを負数で指定することで右側のコンテンツの領域を確保します。その内部のコンテンツでは、floatの状態で右側のコンテンツに重ならないように、マージンを正数で指定します。

<div>header</div>
<div style="overflow: hidden">
    <div style="float: left; width:100%; margin-right:-100px">
        <div style="margin-right: 100px">sub</div>
    </div>
    <div style="float: right; width:100px">main</div>
</div>
<div>footer</div>
header
main
sub

CSS3以降の環境向け

column-属性がサポートされるブラウザならば、それによって段組を簡単に実現できます。