HTML and CSS Reference
In-Depth Information
.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
Search WWH ::

Custom Search