上下にheaderとfooterを配置し、subとmainの2つのコンテンツを左右に並べる場合を考えます。
まずmainを右に寄せるためにsubにfloat:leftを指定し、その幅を確定するためにwidthを指定します。
<div>header</div> <div style="float: left; width:30%">sub</div> <div>main</div> <div>footer</div>
ボックスの右下にリサイズハンドルが表示されているならば、それをドラッグすることでボックスの大きさを変更できます。
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>
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>
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>
一見これで問題がないように見えますが、subの高さがmainのそれを超えると、footerがsubの右に回り込んでしまいます。
これには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>
またはコンテンツを囲むコンテナを用意し、それに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>
mainをsubより先に記述した状態で、前項と同様にmainを右に寄せるレイアウトを考えます。
これには先ほどとは逆で、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>
ただしこの状態では、subの高さがmainのそれを超えると、subがmainの下に回り込んでしまいます。
これは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>
または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>
ウィンドウ サイズの変更などにより、コンテンツを含む領域のサイズが変更される場合を考えます。
左側のコンテンツの幅を、割合ではなく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>
ボックスの右下にリサイズハンドルが表示されているならば、それをドラッグすることでボックスの大きさを変更できます。
まず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>
column-属性がサポートされるブラウザならば、それによって段組を簡単に実現できます。