Fluid Web Page Layout
A fluid web page layout is one that fills the screen regardless of the user’s screen resolution or browser window size. In a well-executed fluid layout, one or two narrow columns have a fixed minimum width (typically 150-200 pixels), while the wide column (the main content) is a variable-width container that automatically flows the content to fill the area. Thus, the page expands to the entire width of the screen, regardless of the user’s screen resolution or window width (well, down to a certain point).
A good fluid layout uses a simple two- or three-cell table that is fully CSS-controlled, without any proprietary or deprecated markup. It also uses relative font sizes for the main content area, so that users may freely adjust the font size in their browser as desired.
A fixed-width web page is only necessary when (a) the client desires to duplicate a print project (a brochure or magazine layout), or (b) the client desires a design headed by fixed-width graphics.
When used, a fixed-width page should be designed for 1024, not 800, because very few users (under 2 percent) are still running 800x600. Most are running 1024x768, and they are rapidly migrating to the even wider 1280 modes. A 760px-wide fixed layout looks extremely cramped on a 1280 monitor!
Fluid CSS Layout Examples
Now let’s take a little tour of another example of how to use CSS-controlled tables to build a clean and stable fluid layout. The easiest way to improve any web page is to start with CSS that overrides browser defaults for all the main HTML tags. After we set new defaults, we then write overrides as needed for specific cases. If we find that we have to make too many such exceptions, we can reverse the two, making the exception the default and vice versa, thus further reducing the amount of markup in all pages.
body {
border:0; margin:0; padding:0;
background:url('img/paper.jpg') repeat scroll left top;
font-family:Verdana,Geneva,"DejaVu Sans",sans-serif;
color:#404040; font-size:100%; }
p { margin-top:0; margin-bottom:0.5em; line-height:1.5em; }
ul { list-style-image:url('img/bul-alab-10.gif'); }
/* this arrangement evens out the line spacing in lists: */
ul,ol { margin-top:0; margin-bottom:0.5em; line-height:1.5em; }
li { margin-top:0.5em; margin-bottom:0; }
a { color:#2C75A0; text-decoration:none; }
a:hover { color:#C00000; text-decoration:underline; }
h1,h2,h3,h4,h5 {color:#2C7590; margin:0 0 .5em 0; }
img { border:0; } /* override stupid 2px blue border */
/* 100% makes browser render monospace at 16px, not 13. */
pre,code,tt {
font:100% Consolas,'Lucida Console','Bitstream Vera Sans Mono',
'DejaVu Sans Mono',monospace; }
pre { margin-top:0; padding:3px; background-color:#FFF9F6;
white-space: pre-wrap;
border-top:1px solid #DDDDDD; border-right:1px solid #999999;
border-bottom:1px solid #999999; border-left:1px solid #DDDDDD; }
code,tt { background-color:#FFF9F6; }
/* Set defaults for all visible data tables */
table { border-collapse:collapse; width:auto;
margin:0.5em auto 1em auto; /* auto auto makes it center */
background:url('img/paper2.jpg') repeat scroll left top; }
/* Set defaults for all visible data cells... */
th,td { background:transparent; border:2px solid #FFFFFF;
padding:0 3px 1px 3px; vertical-align:top; font-size:0.9em; }
/* ...and override th's default centered text. */
th { text-align:left; color:#2C7590; }
/* Some handy classes for tables and cells */
.w100 { width:100%; }
.w50 { width:50%; }
.w33 { width:33%; }
.w25 { width:25%; }
.invis { background:transparent; border:0; }
.vatop { vertical-align:top; }
.vamid { vertical-align:middle; }
.vabot { vertical-align:bottom; }
/* Some handy classes for text */
.b { font-weight:bold !important; }
.i { font-style:italic !important; }
.u { text-decoration: underline !important; }
.l { text-align:left !important; }
.c { text-align:center !important; }
.r { text-align:right !important; }
.j { text-align:justify !important; }
.close { margin-top:0 !important; margin-bottom:0 !important; }
.norap { white-space:nowrap; }
Later, we’ll add some overrides to the above.
The following table uses the CSS above, with pure tags only.
<table> <tr> <th>Head 1.1</th><th>Head 1.2</th><th>Head 1.3</th> </tr> <tr> <td>Data 1.1</td><td>Data 1.2</td><td>Data 1.3</td> </tr> <tr> <td>Data 2.1</td><td>Data 2.2</td><td>Data 2.3</td> </tr> </table>
| Head 1.1 | Head 1.2 | Head 1.3 |
|---|---|---|
| Data 1.1 | Data 1.2 | Data 1.3 |
| Data 2.1 | Data 2.2 | Data 2.3 |
Pure tags, not even a class needed. Note that we could make it fill the screen width simply by adding class="w100" to the table tag, or we could just set that as a site-wide default, if desired. The table is centered with auto left and right margins, which centers the table, not the contents of the table.
Next, we’ll look into a full-page, fluid, stacked-table layout.
Continued…