ブログテンプレートにおける段組CSS

CSSによる段組というのは厄介なもので、あちらを立てればこちらが立たずな状況によく出くわします。一番の問題は、ブロック内に収まらない内容をどう処理するか。どの策が主流なのか、今ひとつ確証が持てないのでポスト。まずは現物をご覧あれ。

■Firefoxで二段組み

■IEで二段組み

■HTML

<div id="content">
 <div id="maincol">
  <p class="img"><img src="shine.jpg"></p>
  <p>http://www.hogehoge.com/foobarabcdefghijklmnopqrstuvwxyz0123456789foobarabcdefghijklmnopqrstuvwxyz0123456789<p>
 </div>
 <div id="subcol">
 　　　…
 </div>
</div>

■CSS

#content p {
    margin:1em 2em;
    word-wrap:break-word;
}

#content p.img {
    width:85%;
    overflow:scroll;
}

#content>* p,
#content>* p.img {
    overflow:visible;
}

「とにかく段組を崩さない」を第一義に、「段のブロックよりデカい画像」と「とぎれない英語の長文」への対策を施しました。

IEだと overflow:visible の状態でデカい画像を入れると段組が崩れてしまうので、まずそれを防止します。p要素のimgクラスに対して overflow:scroll を指定、スクロールバーの大きさも含めて調整する必要があるので、幅を 85% に設定しています。クラス指定がない場合は IE で段組が崩れますが、そこは自己責任ということにしておきます。システムからアップロードされた画像は「<p class="img">」でくくることで対策ができます。Firefoxに対しては overflow:visible のまま、ハミ出すままに任せています。セレクタを使って、scroll になっている overflow の属性を再設定します。

英長文については、IEは word-wrap で折り返しの指定ができるので問題なし。Firefoxで overflow:scroll にするかハミ出させるかは迷うところですが、そのまま見せているサイトも多々見られるので（何も対策していないだけかも知れない）、ひとまずそのままに。

今ちょっと手元にMacがないので、Windows環境でしか見ていませんが、ひとまずこれで。画像はFirefoxでも scroll の方がいいんだろうか…