HTML and CSS Reference
In-Depth Information
The addition of the footer (admittedly, a footer with no actual content), which is then
given the
clear:both;
CSS property/value pairing, solves the problem of the outer element
collapsing underneath these floated items—but it's including additional markup for the sake
of it, some might argue. There are ways that you can avoid inserting seemingly superfluous
markup like this and still manage floated items effectively, something which we cover later in
this chapter.
The main issue with this fixed-width layout is still that it won't allow text to resize com-
pletely. Eventually you'll run out of horizontal room for the text. So with that in mind, let's look
at a more flexible CSS layout.
The Liquid Layout
As its name suggests, a
liquid
layout is one that reflows to fill the available space. Some people
swear by this layout as it gives the person viewing your site control (“I want my window this
size”). However, this layout has its own dangers:
•
If the window is resized to maximum, reading large blocks of text can become difficult;
scanning from the end of a line to a new line is not easy.
•
If the window is sized down quite a lot, elements of the page may collapse in on each
other and overlap in all sorts of weird and not-so-wonderful ways if you don't do your
math correctly.
In short, the flexibility that a liquid layout offers may come at a price, depending on how
your site visitors set their browsers. But caveat emptor!
Here's the CSS for a liquid layout of the same page design. Rather than set a specific width
for the
wrapper
container, we've specified a margin in the
body
element (40 pixels at each side).
Because a block-level element will take up 100 percent of the available width by default, the
wrapper will stretch to fill whatever size the browser window is; there's no need to specify
a width here.
