最近話題になっていた、ヨモツネットさんのCSSで簡単に上下中央揃えを実現する方法ですが、ちょっと別の使い道もあるなと思いました。

以下のような、テキストが画像の下に回り込まないで、画像の幅が可変(ページ毎に画像の幅が違うなど）なデザインの場合です。画像の幅が固定の場合すぐできるんですけどね。

そういうときにもこのハックが使えるかなと。ただ、元ネタのままのスタイルだとIEでテキストが長くなったとき、画像の下にテキストが落ちます（display:inlineなんだから当然っちゃ当然）。幅を指定すればいいんですが、今回は画像幅が可変という前提ですので、テキスト落ちを回避するために画像のボックスをfloatさせました。

DEMO

<div class="content">
<p class="image"><img src="xxx.gif" alt="画像" /></p>
<p class="textBody">本文本文本文本文本文本文本文本文本文本文本文（以下略）</p>
</div>

div.content {
  width: 400px;
}

div.content p{
  margin: 0;
}

div.content p.image {
  float: left;
}

div.content p.textBody {
  display: table-cell;
}

*html div.content p.textBody {
  display: inline;
  zoom: 1;
}

*:first-child+html div.content p.textBody {
  display: inline;
  zoom: 1;
}

どうだろう、使えるかな？