Fixed-width layout is very popular in design. The optimal fixed-width is a matter of discussion. There are plenty of people who still view the Internet through 800×600 pixel resolution. So, a website set to 800 pixels wide is still the safest bet.

Fixed-height layout is another question, and potentially dangerous for design. While the overwhelming majority of people still view web pages with “Medium” text size in Internet Explorer, there is a substantial number of computer users who increase text size because of poor eyesight. Layouts need to be flexible.

So, how can we accomodate?

One method is to set a fixed-height using tables, but we need to be careful. This example shows fixed height with the height definition declared inline with the table tag.

This code does not validate at the World Wide Web Consortium, and this method should be avoided. However, if we define the height of the table in the CSS code, the page validates fine. The CSS definition saves the page.While the table height is fixed in both examples, increasing text size a few clicks does not break the layout. The tables are flexible, and expand to hold the content. With DIVs, however, fixed-height layout can be disastrous. Consider the following page and definition:

#fixed-height {
background: #33FFFF;
height: 400px;
}

While this page validates, increasing text size two clicks in Firefox breaks the layout, with text overflowing the container:

This is disastrous, and this layout should be avoided at all costs.

Later on we’ll tackle the problem of creating columns and DIVs that extend to the bottom of a page, two and three column layouts. For now, however, avoiding fixed-height layout in CSS is a must.