Question

I am getting unexpected results when using vertical-align on an image with accompanying text. If the text is wider than the container, it wraps UNDER the image like this, instead of simply wrapping to the next line:

alt text http://preview.moveable.com/jm/verticalalign.png

My HTML is simple:

<ul>
   <li><img .../> some text </li>
   ...
</ul>

• I have a height and overflow-y:scroll on the UL (likely not relevant)
• I have a height set on the LI that is large enough for the placeholder image plus spacing.
• I have vertical-align:middle on the image to get the text in the right place, almost
• The rest is just margins and borders
• Am am NOT using floats

How can I get the text to wrap properly, perferably without more markup?

Answer 1

If the image is static i would use a background image on the li and then simply add left padding to allow for the correct spacing

  li {
      background: url(/images/foo.jpg) center left no-repeat;
      padding-left: barpx;
  }

you could also use a margin on the li to allow for spacing to the left of the image inside the ul

if the images are different i would simply apply a class to each li to distinguish the difference

edit for seo friendlyness:

add the images into the markup and then hide them with your stylesheet so the user only sees the image set with background image, Google bots ignore stylesheets so will be served the image in the markup.

  li img {
     display:none
  }