Images pushing div down?

HTML & CSS
1

Hi guys,

I have a test page here:

http://www.radio.boudaki.com/temp/11.html

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!!!

2

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:

3

Hi,

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).

4

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


img{vertical-align:top}