css - How to fix Internet explorer 7 bug when using percentage widths for layout?

Question

Please help me in this. I need to create a layout using percentage widths. I have a wrapper that is 100% width.

Now I have a DIV (the main wrapper.. I want to keep it at 94% width percentage.. 94% of 100% body).. okay fine

So to make this simple.

-> BODY 100% width set

--> CONTAINER 94% width

---> FIRST CHILD DIV 70% float left (70% of the CONTAINER)

---> SECOND CHILD DIV 30% float right (30% of the CONTAINER)

But I have 2 equal columns under FIRST CHILD DIV

-----> 50% and 50% percentage width

The bug is: In ie7.. the last column is displayed on bottom .. its not properly floated.. If i reduce the width to 29.9% !!! it works.. i think ie7 has bug in treating percentage widths or something.. Please clarify upon this. I hope you get the problem because the css / html is just too long.. i just hope its a common issue.. :(

Here is the CSS for this DIV .. Hope that helps :)

body {
width: 100%;
background: #fff;
text-align: center;
font-size: 12px;
}

#wide-primary {
background: #fff url(img/shadow1.png) repeat-x top;
position: relative;
top: -1px;
}

#primary {
width: 94%;
margin: 0 auto 0 auto;
text-align: left;
}

#features {
float: left;
width: 70%;
padding: 2% 0 0 0;
}

.featurebox {
float: left;
width: 48%;
padding: 0 2% 3% 0;
}

#lastnews {
float: right;
width: 30%;
padding: 2% 0 2% 0;
}

Answer 1

The problem is sub-pixel rounding. When you are designing with percentages there will be times that the math doesn't result in full pixels (70% of 721px is 504.7px). 721 is arbitrary, but using percentages you'll run into arbitrary numbers. There's no avoiding that. Most browsers figure out a rounding solution for you that doesn't break the layout. IE7 (and older) simply round up. Rounding up, your container width at 721px will include one box at 505px and another at 217px for a total of 722px - more than 100%. At that point IE decides the second box can't fit and drops it below.

There are various solutions depending on your situation. Nicole Sullivan has an interesting solution based on using 'overflow: hidden;' on your last column rather than a float/width combination. I use it when I can. Check it out here:

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

The other solution that I've found when 'overflow' just wont cut it is to add a small negative margin to the last element in a row. If you are floating left, add a several pixel negative margin on the right. Floating right, add it to the left. I haven't run into any negative effects from that (though I'd be glad to hear if others do).

Hope that helps. Cheers.