Fluid Web Pages

Yes, you heard that right. Web pages are fluid. They can and should use the entire available browser window space and stretch as needed to fill that space. To quote my Design Philosophy page,

“When implemented correctly, web pages are fluid – they may change shape and size to fit the needs and requirements placed upon them.”

Don’t think of a web page in the same way you think about an 8½ by 11 sheet of paper. There is no real limit to the size of any web page or how far it might scroll. You are probably reading this because you want to know how to implement a fluid web page or understand how one is made.

It’s quite simple really. All you really must do is use percentages with your layouts instead of exact sizes. Oh, and be careful of software programs that allow you to “see” your web sites as you are editing them. If you are allowed to simply click on a table border or div layer edge and drag to resize it, chances are you will be setting an exact size for that tag. Let’s look at a little code:

<table width="100%">
<tr><td></td></tr>
</table>

Now, whether you are using tables for your layouts or not (since this is now considered out-dated in favor of stylesheets), this code example will still help you understand fluid web pages. The width is set to “100%”. The “%” is required. Without the “%”, the browser would see width=”100″ and interpret the 100 as a measurement of pixels, not a percentage.

So, that’s basically it. You must explicitly set percentages for your widths. This holds for tables, table rows, table cells, divs, spans, and other container tags, but a one-cell table isn’t the best example. Here’s some more realistic code:

<table width="100%">
<tr>
 <td width="200"></td> <!--Left Navigation-->
 <td width="100%"></td> <!--Right Content Body-->
</tr>
</table>

Yes, the above code will work just fine, and no I didn’t forget the “%”. I left it out on purpose. The browser will set aside 200 pixels for the cell on the left (the navigation) and then give the remainder to the cell on the right (the content) since the cell on the right AND the table both have widths set to 100%. Pretty cool, eh?

Other variations work too. How about this three-column table?

<table width="100%">
<tr>
 <td width="160"></td> <!--Left Navigation-->
 <td width="100%"></td> <!--Right Content Body-->
 <td width="160"></td> <!--Right Navigation-->
</tr>
</table>

Or this two-column layout?

<table width="100%">
<tr>
 <td width="50%"></td> <!--Left Content-->
 <td width="50%"></td> <!--Right Content-->
</tr>
</table

For help with fluid web pages that use stylesheets, visit Little Boxes.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s