CSS Front-End Development

Authored by Corey Ballou

Fixing the CSS Box Model

The concept of the box model is unintuitive. You can’t simply specify a 100% width on a block level element with a margin or padding and have it stay within the confines of the parent bounding box. Luckily, there’s a fix using the box-sizing tag which is compatible in all major browsers and IE8+.

The above snippet will allow you to start defining your box level elements with precise widths (or 100% width, for that matter) and have any margin and padding subtracted from the specified dimension. This is a huge benefit and takes the pain out of exact width calculations when dealing with positioning.

If you’d like to see these two examples combined, simply navigate over to this example I have created for you.

I’ll skip the details in lieu of a much more thorough explanation from Chris Coyier. Give the following a read if you’re interest in knowing the specifics as to what’s going on:

Box Sizing | CSS-Tricks

Author: Corey Ballou

Corey Ballou is the CEO of Whether you're a student, young professional, entrepreneur, startup, or small business, you can be up and online fast with your own custom domain, email, and webpage on POP. Corey is a professional PHP developer by trade, specializing in custom web applications development for startups, small businesses, and agencies. Follow Corey on Twitter @cballou.