Inline image and block text

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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?

Re: Inline image and block text

Rob wrote:
Quoted text here. Click to load it

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.

  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; }


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

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

Take care,


Site Timeline