Weird math when using percentage based layout

Question

I have a layout with two main divs. The width of each div is 45%. Yet when I inspect the divs at different page widths the the divs are usually one pixel different from each other. 639 vs 640. I don't really care about this, the only problem is that items inside the smaller div aren't lining up properly with other items. It only happens at certain page widths but it is broken more than it is correct. It seems the elements in the larger div line up at any window size and the smaller div is almost always wrong, but is correct at some sizes.

What is going on here, is there a way to force the smaller div to act like the larger div?

Answer 1

This is a bug/sub-pixel issue.

I've asked a similar question a while back and found out that webkit-based browsers have a rounding issue when it comes to percentages.

Here's the link that bookcasey shared with me to answer my question.

Answer 2

Widths must be in integer amounts.

What is 45% of 955? 429.75px. Can't have that. So one of them has to be wider than the other.

Answer 3

Don't use percentages, and if you do, make sure the total width adds to a bit below 100%. I've always run into overflow and misalignment issues when using 100%.

I'm assuming you have another div that takes up the remaining 10%. So, perhaps try 44% on both.