Making a box “width” keep that width, even with padding.

by terry

I’m saving this Paul Irish post for later (or always) use from now on. There’s nothing worse than defining something as 400px wide with 20px padding left and right and… oh wait, NOW it’s actually 440px wide and screwing up the layout.  So if I want the box to REALLY be 400px wide, I have to define it as 360px wide… *sigh*

So here’s the code:

/* apply a natural box layout model to all elements */
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

Leave a Reply