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.
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:
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:
If however you use border-box
, those borders will be included in the width calculations.
As you can see, using Internet Explorer's sizing method can solve a common layout issue.
blog comments powered by Disqus