The Dev Pages

A knowledge base for simple (and beyond) web applications development

CSS Vertical Overlapping of floating divs

Posted on September - 16 - 2009

I thought this involved some trickiness. I needed to have a row of floating divs have the content underneath it pulled up over it, just a little bit, so that some body tabs appeared to the right of one of the floating images in the header.

After much testing and trial and error I figured out that the content below overlaps the content above depending on the dimensions of the div above it. The content below will STOP overlapping when it hits the image above UNLESS you make the height of the above div (that contains the image/content) to be smaller than the image/content itself. It appears by default, the height of the div containing the image is the same as the image (makes sense).

So the trickiness is in fooling the div below to overlap the div above, when the div below sees the above div as smaller in height than the image it contains.

I’ll post my html in the off-chance that someone can find and use this info.

Add A Comment