On 2008-03-31, Jeff <jeff@spam_me_not.com> wrote:
> I'm rewriting some of my CMS code.
>
> It's very common to have a block of text with an image.
>
> This can be done this way:
>
><p><img...>enough text to flow past the image...
></p>
>
> or this way:
>
><div>
><img ...>
><p>enough text to flow past the image...</p>
></div>
>
> Now, if we set widths and float the image either left or right, they
> will appear identical. I suppose you could also set image align
> properties, although I seldom use most of the alignments for this.

They're deprecated and browsers just turn them into float anyway.

> Method two allows for a no text wrap, perhaps that's useful.
>
> Any thoughts on handling images?

I prefer the first of your two examples. The second example is a bit
counterintuitive because the position of the float may depend on the top
margin of the <p> depending on whether that top margin collapses with
the top margin of the element containing the float.

In other words, if the <div> has no top border or padding:

<div>
<img>
<p>
</div>

looks the same as

<div>
<p>
<img>
</div>

But give the div top border or padding and in the first case the top of
the img moves up. I'm assuming <p> has some top margin.

This is also tricky enough that I'm sure some browsers get it wrong.

Presumably you want the float aligned with the top of the <p> and the
second approach guarantees that.