Replacing TABLE with DIV

Going from transitional to strict doctype

[adb64]

I'm currently transforming my site from a 4.01 transitional to a 4.01 strict doctype and also replacing tables with divs if possible.
Now I'm facing the following problem, in my transitional table layout I had the following code:

<p>Some long paragraph text, bla bla
<table border=0 cellspacing=0 cellpadding=0 align=left width=213>
<tr><th><img ...></th></tr>
<tr><td>Image Caption</td></tr>
</table>
more paragraph text</p>

In a strict doctype, the table will end the paragraph and the text will not nicely float around the image table.

When replacing the table with a div I now have this:

<p>Some long paragraph text, bla bla
<div class=image style="width:213px; float:left;">
<img ...>
<br>Image Caption
</div>
more paragraph text</p>

Which give me the same result, the paragraph is broken.

How do I get the same result as when using the table solution in the transitional version. I want the text to float nicely around the image and the caption below the image?

Thanks,
Arjan

[encyclo]

A paragraph cannot contain another block-level element such as a table - even in your first example the opening

<table>

tag acts to close the paragraph as the

</p>

is optional in HTML.

Like

table

, a

div

is a block-level element, so the

div

closes the paragraph and the text which follows is outside of an appropriate container. The validator will report the closing

</p>

as invalid in both of the above examples. If you want to float the image within the paragraph, then you must use an inline element such as a

span

.

[adb64]

encyclo,

using a span also crossed my mind, but you can not set a width on an inline element.
After some more experimenting I replaced the <p>...</p> with a <div class="para">...</div> and gave the para class the same properties as I had set on the P element.
That seems to solve my problem.