View Full Version : Double Margin Float when I add "height:100%"

12-31-2007, 05:02 PM
I have a css class called "box" which I use for a some divs and a UL to display the same.

The divs which use the class called "box" all have inner divs for rounded corner image effect.

The class called "box" needs "height:100%" to make the divs display correctly in IE6 and IE7. Without the height property the bottom of the divs dont wrap around the inner divs.

The class called "box" is also within a UL menu called "sidecontent" which is floated left and displayed inline to avoid IE's double margin bug.

The problem is - If I keep the height 100% in the class called "box" the UL menu called "sidecontent" keeps its double margin bug in IE. But I need the height 100% for the divs to display properly. If I remove the "height:100%" the double margin bug in the UL menu vanishes, but Im left with the bottom of the divs not displaying.

Here is the address, with the IE double margin bug menu on the left. The divs with the "test test test.." content should display ok. Its all happening in IE6 and IE7.


12-31-2007, 06:19 PM
I have fixed it. I removed the height:100% from the "box" class, created a new class called "boxheight" with height:100% and applied the new class only to the divs which need it.

Genius! I seem to be answering all my own questions here atm!!:thumbsup: