Images pushing div down?

Hi guys,

I have a test page here:

The blue is a div and the red is an image. I cannot work out why the blue is wrapping under the image…i need it to stop under the image. so the div is just as high as the image…

I cannot understand why this is happening. There’s only the image in the div so what’s pushing it down?

This is driving me crazy!!!

Bugger…what an idiot!

I haven’t posted in the css forum for years…and then I get caught out by something like this!

Many thanks Paul :slight_smile:


Image is ‘inline’ by default, and therefore creates space for text-descenders by default, i.o.w. the browser leaves room for the descenders of any text you want to put in there to display, such as the “tail” of a “y”.

There are several solutions for this:

  1. Set the vertical-align property of the <img /> element to bottom. This aligns the bottom of the <img /> with the bottom of the line box, eliminating the gap.

  2. Set the display property to block. This eliminates the gap, and may be a good fix in many cases. But, it may cause problems of its own, as each block element wants a line all to itself. The text will be forced below the image.

  3. Float the image. Floating an image makes it a block.
    Two things happen. First, the text now aligns to the top of the float element. If this is what you want, you’re all set. If not, the inline vertical-align is needed. Second, you will likely want the floated image to be contained by its parent. In this case, you simply set the parent to {overflow: hidden;}.

  4. Set the parent element to font-size:0 (doesn’t work for Opera)

  5. Setting the line-height to 0 on the parent element (works for Opera)

For IE6, you can give hasLayout by adding {zoom: 1;} to the parent (not valid css so needs to be hidden by codcom or star html hack).

The image is aligned on the baseline and not the top or bottom so it pushes the parent higher.