[CSS] 段組みの使い分け（ピクセル固定2カラム）

ピクセル固定で左右2列の段組を組む場合、CSSのパターンは色々とありますが、
その中でも例えば以下の2つは同じ片方floatだけど、違う効果をもたらします。

1. 片方はfloat、もう片方はmargin

#container {
width: 400px;
}
#left {
width: 150px;
float: left;
}
#right {
width: 250px;
margin-left: 150px;
}


LEFT
LEFT

2. 片方にだけfloatを指定する

#container {
width: 400px;
}
#left {
width: 150px;
float: left;
}
#right {
width: 400px;
}


LEFT
LEFT

この2つは、同じようでいて実は少し違うので、用途に応じて使い分けると面白いです。
具体的には例えば左のカラムの方が短い場合に、右側のカラムの挙動が変わってきます


1の方法で段組みをすると、こんな感じに。
いわゆる通常の段組み。


#container_sample1 {
width: 400px;
}
#container_sample1 #left {
width: 150px;
float: left;
background-color: #cc9;
}
#container_sample1 #right {
width: 250px;
margin-left: 150px;
background-color: #cc6;
}



一方、2で段組みをするとこうなる。


#container_sample2 {
width: 400px;
}
#container_sample2 #left {
width: 150px;
height: 30px;
background-color: #cc9;
float: left;
}
#container_sample2 #right {
width: 400px;
background-color: #cc6;
}



「段組みをする」というと一般的には、回り込みは避けるべきものとして書かれているんですが、
幅寄せが登場するのは何もページの分割ばかりではなくて、
もっと細かい部分にもいちいち登場します。


例えば、文章の先頭に画像を配置するとか。

そういう場合、1のやり方でやると、
右の文集の長さが変わってもデザインの印象を変えなくて済みます。
一方で2の場合では、画像をアイコンのように使用することが出来、
テキストの頭出しがより明確に出来ます。
（画像の高さに合わせてテキストの高さを調節するとより効果的）

1の例

#container_sample3 {
width: 400px;
}
#container_sample3 #left {
width: 150px;
float: left;
}
#container_sample3 #left img {
border: solid 1px #000;
vertical-align: top;
}
#container_sample3 #right {
width: 250px;
margin-left: 150px;
background-color: #cc6;
line-height: 20px;
}

2の例

#container_sample4 {
width: 400px;
}
#container_sample4 #left {
width: 150px;
float: left;
}
#container_sample4 #left img {
border: solid 1px #000;
vertical-align: top;
}
#container_sample4 #right {
width: 400px;
background-color: #cc6;
line-height: 20px;
}




一昔前のHTMLだと、1の例はtableタグを使って実現してきましたし、
2の例はimgタグにalign=”left”を指定して実現してきたんですが、
tableタグは多用しすぎると（定義的な意味合い以外でも）重くなったり、
ソースが見づらくなったりしますし、imgタグの方は装飾の分離という意味で難があり。

結局、双方ともfloat（ないしはその他の段組テクニック）を使って表現しないといけないので、
この辺の、似てるけど違う解釈を上手く取り合わせつつ表現すると、
最小限のパターン、コードで綺麗に書けるかなーと思います。