Losing div borders because of floats inside it

[aarpol]

Hi folks,

I wonder if anyone can shed any light on why I'm losing left and right borders of these divs in IE when I have the elements inside floated?

http://www.marketingmixers.com/direc...ncedsearch.php

Any ideas?

[blufive]

That URL gives a "page not found" error.

[aarpol]

Thanks, fixed now.

Any thoughts?

[aarpol]

Anyone?

[Paul O'B]

Haven't looked at the code yet but it looks like a position:relative is needed on the floats (or the parent - or both).

I'll have a look at the code in a minute

paul

[Paul O'B]

Hi,

As suspected here is the offending code with the position:relative added:

div#content div {
margin: 5px;
padding: 0;
border: 1px solid #000;
clear: both;
position:relative;
}

The borders will now appear as expected.

You may wish to run your code through the validator as you have some invalid nesting in your code.

Hope that helps.

Paul

[aarpol]

Fantastic thanks!

Yeah, bound to be some validation errors in there at the minute. Will get them at the end.

If you have a minute, could you explain why the position relative is necessary?

[Paul O'B]

If you have a minute, could you explain why the position relative is necessary?

Yes - its a small bug in ie where it forgets whats in front and draws the background over the borders when it redraws. It sometimes will completely obscure floats and images (peek-a-boo bug).

This usually happens on children of positioned elements so adding a positioning context such as position:relative forces ie to understand it better.

Its a bug really but forcing a stacking context makes ie work it all out properly.

Paul