When using percentages (%) for the sizing of my elements, Chrome apparently prefers to make up its own rules mathematically.
It is my understanding that when you add 80 + 20, you get 100; right? Okay good. Chrome understands this too. But what if we write the same equation differently. For instance: (78 + 1 + 1) + (18 + 1 + 1) What’d you get? Was it 100? Yeah, me too.
So then can somebody please tell me why Chrome thinks otherwise?
Take two elements and float them alongside one another. Then, apply width:20% to one element and width:80% to the remaining element. You’ll notice that 100% of the page (or container) has been occupied by both elements side-by-side. However, let’s keep it simple and add a padding of only 1% to both sides of each element. This means one element will have width:18%; padding:1% and the other element will have width:78%; padding:1%. In theory, this should still have the same result: 100% of the page (or container) is occupied by both elements side-by-side. But in Chrome, this simply isn’t so. It falls short.
The proof is in the pudding: jsfiddle (you’ll notice the slight differences if you’re using Chrome).
It’s frustrating because when it all adds up, especially with a higher volume of elements being used side-by-side, it can really throw a layout out of whack. I know that by creating child elements to take care of padding and/or the margins, we can avoid the situation, but this can lead to the use of markup that would otherwise be redundant.
I just need an explanation as to why Chrome behaves this way (maybe it’s a Webkit thing altogether, I haven’t tested it yet).
It’s a bug.