This module extends the 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', and 'column-width'
features defined in [[!CSS2]] chapter 10 and in [[!CSS3COL]]
+
The definition of the 'box-sizing' property in module supersedes the one in [[CSS-UI-3]].
+
+ This example uses box-sizing to evenly horizontally split
+ two divs with fixed size borders inside a div container,
+ which would otherwise require additional markup.
+
+ sample CSS:
+
+ div.container {
+ width:38em;
+ border:1em solid black;
+ }
+
+ div.split {
+ box-sizing:border-box;
+ width:50%;
+ border:1em silver ridge;
+ float:left;
+ }
+
+
+ sample HTML fragment:
+
+ <div class="container">
+ <div class="split">This div occupies the left half.</div>
+ <div class="split">This div occupies the right half.</div>
+ </div>
+
+
+ demonstration of sample CSS and HTML:
+
This div should occupy the left half.
This div should occupy the right half.
The two divs above should appear side by side, each (including borders) 50% of the content width of their container. If instead they are stacked one on top of the other then your browser does not support 'box-sizing'.
+
To avoid ambiguities,
+ specification authors should avoid ambiguous uses of terms such as width or height without further qualification,
+ and should explicitely refer and link to
+ the
inner size,
+ the
outer size,
+ the size of the
border-box,
+ the
computed value of the
sizing properties,
+ etc,
+ as appropriate for each case.
+