Problem aligning with float and clear

[Paul E Collins]

Hello.

I want to display a number of individual blocks of text. Each block
has an associated image, which should be displayed on the right and
aligned with the top of its block of text, i.e.
(use a fixed-width font to view this!)

Some short text. +-------+
| |
+-------+

This one has some +-------+
longer text which | |
will wrap around +-------+
the image on the right.

I'm using this markup for each of the blocks:

<div style="width: 256px; height: 192px; margin-left: 20px; float:
right; clear: right; background-image: url('image.png' )">
</div>
<div style="vertical-align: top">
<p>Text to appear on the left</p>
</div>

(The 'background-image' bit is used to achieve a single-image rollover
effect: the 256 x 192 region clips the bottom half of the 256 x 384
image, and onMouseOver shifts the other half into view. Anyway, that's
not the problem.)

The page renders as intended in MSIE, but under Firefox and Safari
(and perhaps other more standards-compliant browsers) the text shifts
up into previous blocks, i.e. "float: right; clear: right" does not
ensure that each subsequent block is clear of the previous one and
aligned with the next corresponding image.

What am I doing wrong here, and how can I correct it?

P.