Fluid, Elastic, Fantastic!
A fundamental question when creating web pages is whether the layout will have a fixed width or whether it will be able to expand and contract depending on factors such as the width of the browser window (or viewport). Fixed-width, pixel-based layouts are predictable but not very adaptable to changing browser conditions. Fluid (or liquid) layouts—even with a minimum and maximum width set—are harder to control, especially if the design requires features like a full-width header image. Em-based designs—especially when combined with some fluid elements—in a sense combine the both of best worlds…
The float property of CSS is a powerful way to lay out the elements of a web page. When an element is floated, it is “taken out of the document flow”—meaning that the other elements (for the most part) act like it’s not there—and this can cause some unexpected layout results. Floats often need to be “contained”; and, fortunately, there are some easy ways to do this, as demonstrated in this post…
