Page Layouts - The CSS - page 121

<div class="right_sidebar">
.right_sidebar
</div>
</div>
You may be looking at that previous example and thinking that the math
doesn't add up, and you'd be right—it doesn't. When mixing percentage
measurements, you have to fudge the numbers just a little. A 50 percent
width plus another 50 percent width plus 4 pixels worth of borders plus
a 5-pixel margin is clearly greater than the 100 percent width that the
container has to spare. It is a better bet that 96 percent of that space
will leave 9 pixels to spare, which, in this case, will be true so long as the
container's content width is at least 225 pixels ( 9 pixels / (100 percent
- 96 percent) * 100). If the content width is larger than 225 pixels, that
4 percent width will be larger than 9 pixels, but in many situations, those
few extra pixels are a fair trade-off for having a mixed layout.
Designing with Constraints
Flexible columns are often the best solution for a Web where every visi-
tor has a different screen size and browser size, but that doesn't take
into account that the content often has a role to play as well. Content
columns that are too small may not fit images or video content, and
when they get too wide, the content may be difficult to read. Secondary
columns too may have constraints or optimal sizes. Mixed columns can
be the best solution.
You can use the min-width and max-width properties to cap the size of
otherwise liquid columns or column wrappers. In the following code, the
container used in the previous examples is allowed to grow to between
600 pixels and 1000 pixels and then is centered on the page if it goes
beyond the maximum width.