Posted by Jonathan N. Little on 02/24/07 14:51

Rob wrote:
> 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"...


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]