横並びにした画像にテキストが回りこまないようにする方法

例えば、Amazonのアフィリエイトみたいに、書籍の画像と説明文を横並びにする方法です。 説明文が長いとき画像の下に回りこまないのが美しいですよね。方法は二通りあります。

1. marginで指定
2. overflowで指定

以下にサンプル画像を示します。

基本の(X)HTMLコードは以下のようになります。

(X)HTMLコード

<div class="column">
<img src="image.gif" alt="" />
<p>
テキストテキストテキストテキストテキスト
・・・（略）・・・
テキストテキストテキストテキストテキスト
</p>
</div>

１．marginで指定

画像の横幅が固定の場合は、その大きさ分をmarginで空けます。

CSSコード

.column img{
   float:left;
}

.column p{
   margin-left:160px;
}

この場合、次の要素も回り込んだままなので、clearなどを指定して回り込みを解除しなければなりません。

２．overflowで指定

画像の横幅が未知の場合は、余白を固定することが出来ません。overflowを使用することで、テキストが回り込まなくなります。

CSSコード

.column img{
   float:left;
}

.column p{
   overflow:hidden;
   zoom:1;
}

｢zoom:1;｣はIE6でレイアウトが崩れるのを防ぐために指定します。