Layout with CSS3 - HTML5 and CSS3 - page 283

}
.sixth {
width: calc(100%/6 - 8px);
}
.quarters {
width: calc(100%/4 - 8px);
}

And here's the HTML —assume it fits in a standard HTML5 document;
see ch08/calc-3.html for the full listing:

<div class="half_third">1</div>
<div class="half_half">2</div>
<div class="half_third">3</div>
<div class="half_half">4</div>
<div class="half_third">5</div>
<div class="sixth">A</div>
<div class="sixth">B</div>
<div class="sixth">C</div>
<div class="sixth">D</div>
<div class="sixth">E</div>
<div class="sixth">F</div>
<div class="quarters">00</div>
<div class="quarters">01</div>
<div class="quarters">10</div>
<div class="quarters">11</div>

Because table cells in a column share a width, this is extremely difficult
to do with a single table. And because of rounding errors, it can be dif-
ficult with any other approach unless you choose carefully for the over-
all width.

calc good calc bad

Allows precise control
of lengths specified in
any combination

Requires an
understanding of
how padding, margin,
and border combine