Splitting the Difference

Internet Explorer has until recently, had its own special interpretation of the CSS box model. If you're not familiar with it, your blissful ignorance is to be congratulated. Occasionally Internet Explorer's box model is very useful, and best of all, all modern browsers can conditionally use this model.

The Box-Sizing Property

The box-sizing property allows modern browsers to decide how they should calculate an element's dimensions. A setting of border-box means that the border and padding eat into the allotted dimensions, while the default content-box means that the border and padding are not part of the element's dimensions.

Border vs Content
Border vs Content Box Sizing

This property is very useful if you want to split an element into two or more sections without worrying about their exact dimensions. For instance, for our splitter, we will partition the element into a 25% and a 75% section:

Partitioned Element
Partitioned Element

A Practical Example

If you want to create the layout above, it makes sense to use two floated elements with a 25% and 75% width. Unfortunately if these elements have any border, the content-box model will add those borders in addition to the 100% width, ensuring that the second element will wrap:

25%
75%

If however you use border-box, those borders will be included in the width calculations.

25%
75%

As you can see, using Internet Explorer's sizing method can solve a common layout issue.

blog comments powered by Disqus
Monkey Small Crow Small