Box-sizing: border-box is great

So I have been developing responsive websites for a few months now and I haven’t ran into many problems–until yesterday of course. The problem I ran into involved columns with percentage padding in Firefox. For some reason padding defined by percentage makes my columns a lot larger than they should be, so a 20% div with left and right padding of 2.5% should show up as 25% right, but in Firefox 12 it is showing up as 35%, it’s very odd.

Not quite sure why this only happens in Firefox 12 and not in any other browser but it’s quite annoying. I fixed this by using the box-sizing:border-box method I saw in a post by Paul Irish. It fixed the issue quite nicely.

Basically the box-model is all messed up in CSS, when you start adding padding and other elements to a block-level element you have the potential to make the size of the box larger even though you have a specified width on that block-level element. It’s pretty nonsensical if you ask me. Box-sizing:border-box makes your elements act like you think they would/should, it makes sure that the addition of padding doesn’t increase the overall width of the element.

Because the site in question was already developed without this method I didn’t want to just add the * selector with box-sizing:border-box because it would have messed everything up.

Below is the code with the * selector.

*{
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}