Layout with CSS3 - HTML5 and CSS3 - page 282

Full Partial

- 19

- 4.0

9.0 -

Even with calc , it's difficult to get
things perfect for every width when
using percentages because of
rounding errors—on a window 640
pixels wide, a box of 30% width in this
layout works out as 172.8 pixels wide.
The browser has to choose whether to
render that as 172 or 173 actual pixels,
and you have to hope it all works out.

- -

- 5.2

There's more to calc than simple
addition and subtraction. calc
makes it straightforward to do
things that are hard with any
other approach. Imagine that
you have a set of elements of dif-
ferent widths that you want to
display on multiple rows, but
each row should be an identical
width.

Here's the CSS to generate this screenshot:

div {
float: left;
margin: 0;
padding: 1em 0;
border: 4px dashed black;
}
.half_third {
width: calc(50%/3 - 8px);
}
.half_half {
width: calc(50%/2 - 8px);