Layout with CSS3 - HTML5 and CSS3 - page 279

CSS3 improvements to CSS2 approaches
One of the major pain points that arise with the CSS layout approaches
mentioned in the previous sections is the control of combined width,
particularly when mixing percentage and pixel units as you saw with
inline-block . CSS3 offers two new features that alleviate this pain:
❂ A calc() function
❂ The box-sizing property
The calc function allows the construction of widths from multiple
units: for example, 25%—4px. This is useful if several elements need to
fit exactly in a percentage width, but each needs to have a border or
margin of a certain number of pixels. box-sizing gives the web author
control over the problematic CSS box model. Both are covered in more
detail in this section.
Mixing different length units with calc
Many of the issues with using float s or inline-block for layout are due
to the basic incompatibility of different length measurements—how
many pixels to a percentage point, or how an em varies due to factors
beyond your control such as window size and font rendering. Following
is the example layout from the previous discussion of inline-block .
Earlier, all the widths were specified in percentage values, but now
there's a mixture of percentages, pixels, and ems:
body {
width: 90%;
margin: 0 5%;
font-family:
"Komika Hand", sans-serif;
}
header, section, aside, footer {
margin: 1em;
padding: 1em;
outline: 4px dashed black;
vertical-align: top;
}
section, aside {
display: inline-block;