Article
What is Liquid Design?
Putting Liquid Design into Practice
So how do we do it? Well, let's start by looking at a typical 3 column page layout. First we'll look at this in CSS, and then with tables.
A "Bare Bones" 3 Column CSS Layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Bare bones 3 column CSS layout</title>
<style type="text/css">
#leftpanel {
position: absolute;
top: 140px; /* resize these bits to liking */
left: 0;
width: 200px; /* works best with fixed
width right - left divs*/
}
#rightpanel {
position: absolute;
top: 140px; /* resize these bits to liking */
right: 0;
width: 200px; /* works best with fixed
width right - left divs*/
}
#content {
position: absolute;
top: 140px;
padding-left: 220px; /* 20px to play with */
padding-right: 220px; /* 20px to play with */
}
</style>
</head>
<body>
<h1>Bare bones 3 column CSS layout</h1>
<!-- Content here -->
<div id="content">
<p>You can put your content here, under the space
for a header, or you can re-arrange the
divs in the html to put your right or left column first.</p>
</div>
<!-- Right column here -->
<div id="rightpanel">
<p>This is a good place to pop nice optimized
text into, especially if your #content div
is full of images and little text. I like to
put an 'editors note' here: Just an excuse to
squeeze optimized copy into the html flow without
bothering the user ;-)</p>
</div>
<!-- Left navigation etc -->
<div id="leftpanel">
<p>Links, come last, presuming your 'header' has
a 'main sections' navigation with regular text links
this is just fine for SE's and magic for
optimization.</p>
</div>
</body>
</html>
Paste that code into vim, notepad or whatever tickles your fancy, and you'll see that it really is a bare bones example. You'll notice that when you resize your browser, the middle column expands and contracts to make up the difference. The left and right coloumns remain fixed.
And if you're wondering why I didn't make it completely fluid, the answer is simple: it just looks and works better this way, to my liking at least. Try adjusting the left and right column widths to percentages: it should work fine.
You'll have to adjust the commented sections in the css and add a great deal more presentation rules but this basic layout should give anyone who's new to this a good building block to start with.
Further CSS resources can be found here:
If you're wondering if you could implement fluid CSS layouts on your Webpages, you might also like to check out these examples:
- The first is a small private fan site: Gone To Ground
- and this from the Pierce College Distance Learning department.
Good examples of liquid layout from very different sites!