What is the best way to handle CSS's width of 5% and 35% becoming 30.5 and 213.5 and IE 7 "round them up" and push the 2nd floated element down?

Very simply, there are 2 divs inside a div with 610px width

1) div1 has width of 60% of parent = 366px, padding-right = 5% = 30.5px

2) div2 has width of 35% of parent = 213.5px

both divs are floated left inside of parent div.

So on most browsers, they all float inside on the same level, because 366 + 30.5 + 213.5 = 610px, and I am suspecting Firefox, Chrome, and IE 8/9 actually truncate 30.5 to 30 and 213.5 to 213, so the 2 divs ended up a little bit narrow in the parent div, but it isn't a big issue, really, to be 1 or 2 pixels off.

The big issue is with IE 7, that it round up 30.5 to 31, and 213.5 to 214, and now, the total space needed = 611px and therefore div2 cannot开发者_JS百科 float on the same level, and need to be pushed down. (floated below div1)

What is the best way to handle this? I am tempted to just change 5% to 4.9%, and 35% to 34.9%, and actually, I think I probably need to change one of them, because the only issue is when both happen to be ending with .5, so if one is "lessened" a little bit, then the .4 and .5 will have the effect of one getting rounded down, and one rounded up on IE 7. But doesn't this affect the result on FF/Chrome/IE 8 and 9 as well? What is the best or most elegant solution for this, to work in IE 7 to 9 and all other major browsers?

If you need pixel precision for your on screen rendering, you need to specify pixel precision in your widths.

What is the benefit of specifying percentages within a fixed pixel width parent container? Percents are only meaningful within a context of parent containers that also have some form of relative sizing, such as percents.

You should change div1 to width of 366px and padding-right of 30px, and div2 to a width of 214px.

If you are limited to only specifying percentages for some reason, then yes, you can specify extra decimal points in your percentages to get the calculations correct. Drop them by .1 or .2% until the largest ones consistently round down to the right pixel sizes.

As an alternative, you can remove the padding-right from div1 and float div2 to the right instead of to the left.

In this case I would use some javascript:

if ($.browser.msie && $.browser.version == 7)
{
    $('.parent').width($('.parent').width() + 1);//Makes parent 1px wider in IE 7
}

Take a look in width() reference.

I'd do it with a conditional CSS comment...

<!--[if IE 7]> 
div2 { width: 34.99% }
<![endif]-->

or if that failed to work, force a clear and then use relative positioning to put the divs in the correct spot.

<div style="width:500px; height:100px; height:100px; background-color:#000">
        <div style="float:left; width:30%; height:100px; background-color:#ddd"></div>    
        <div style="float:left; clear:both; position:relative; left:30%; top:-100px; width:5%; height:100px; background-color:#bbb"></div>
        <div style="float:left; clear:both; position:relative; right:-35%; top:-200px; width:65.5%; height:100px; background-color:#999"></div>
</div>

See example: http://jsfiddle.net/HE8uX/3/

(This should display correctly in IE7. To make sure that the three divs stays within the confines of the parent div, you can check this revision: http://jsfiddle.net/HE8uX/5/ -- the combined width of the three divs should match the width of the black parent)