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 i

Answer 1

Here is the simple solution for this:

div {
*min-width: 100%;
}

tested in IE7.

Answer 2

This is what i am using to fix that problem on IE 7.

<!--[if IE 7]>
    <style>
        body {
        padding:0 1% 0 0;
        width:101%;
        }
    </style>
<![endif]-->

Answer 3

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.

Answer 4

Try the following:

div {
    width: 100%;
    *overflow: auto;
}

It works well in IE7.