Reply To: Responsive site – Problem with resizing the browser

[Senff]

Quick solution: give “quote” a width of 83% instead of 85%.

Long explanation: definitely something to do with percentages. At one point I resized my browser fully and then I noticed that the div max-width had a full width of 1040, but with the padding of 5% on both sides, you would expect there would be 936 available. However, the calculated value was only 914 — with padding on both sides being 63.

No idea why, cause as far as I know, 5% of 1040 is 52.

So then the two elements inside got a width of 15% and 85% (of 936). In pixels that should be 140 and 795.

However, the calculated values were actually 137 and 782. I get the 137 (cause that’s 15% of the actual 914), but the 782??

Riddle me that.

Having said that, I’m not a big fan of placing things next to eachother, and give them a TOTAL percentage of 100. I’d rather go to 99% or 98% even, to avoid situations where rounding errors occur.

Example: one flexible-width parent div with two 50% child divs. If the parent would have an odd number width, things might go wrong sometimes. Let’s say parent is 101 px, then both inner divs would be 50.5 pixels — some browsers round this to 51; and then it won’t fit in the allocated 101 anymore.

Sorry for the long post.