Inline image and block text

[Rob]

Hi all,

I've been attempting in vain for several days to do something that
should be very simple: display a small image with text adjacent to it,
but NOT wrapped underneath it. Here's a crude ASCII-art example of
what I'm attempting to do:
__
|__| Here is a bunch of text that
wraps, but not underneath
the image at its left. I'd also
like to make sure the image
is centered (absmiddle) with
the first line of this text.

Anyone have a clue how to do this?

 

[Jonathan N. Little]

Hi all,

I've been attempting in vain for several days to do something that
should be very simple: display a small image with text adjacent to it,
but NOT wrapped underneath it. Here's a crude ASCII-art example of
what I'm attempting to do:
__
|__| Here is a bunch of text that
wraps, but not underneath
the image at its left. I'd also
like to make sure the image
is centered (absmiddle) with
the first line of this text.

Anyone have a clue how to do this?

Yeah, wrap image and text in DIV, float the image and set left margin of
text = "width of image + margin" in this example 300 pixels.

STYLE:
/*
want to clear floats do each image-text unit stays separate
if IMG height > text, padding will adds space for following units
*/
DIV.pixbox { clear: both; padding: .5em; }

/*
float IMG and clear any margins & padding - browser consistency
*/
DIV.pixbox IMG { display: block; float: left; margin: 0; padding: 0; }

/*
set margin of P so left is IMG.width + desired.margin, also set bottom
margin to allow more than one paragraph per 'image-text' unit
*/
DIV.pixbox P { margin: 0 0 1.5em 310px; padding: 0; }



HTML:

<div class="pixbox">
<img src="some.jpg" width="300" height="250" alt="my image">
<p>
Whatever your want to write about your picture ...
</p>
<-- add more paragraphs if needed -->
</div>

<-- Next image-text unit -->
<div class="pixbox">
<img src="someother.jpg"...