Home/ Questions/Q 5928625
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T14:18:49+00:00

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

  • 0

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 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0