Liquid and Frozen Designs

All the designs we’ve been playing with so far are called liquid layouts because they expand to fill whatever width we resize the browser to. These layouts are useful because, by expanding, they fill the space available and allow users to make good use of their screen space. Sometimes, however, it is more important to have your layout locked down so that when a user resizes the screen, your design still looks as it should. There are a couple of layouts that work like this, but let’s start with frozen layouts. Frozen layouts lock the elements down, frozen to the page, so they can’t move at all, and so we avoid a lot of issues that are caused by the window expanding. Let’s give a frozen layout a try.

Going from your current page to a frozen page only requires one addition to your XHTML, and one new rule in your CSS.