As CliveC mentioned, absolute positioning is not as good in many cases because it breaks the HTML flow. However, absolute position can be used within containers such as div tags to be relative to that div tag which can come in quite handy.
Don't use too much absolute positioning because the effects will start to get less and less logical and less cross-browser if you stack too many together. However, don't avoid them, per se, either, as they can be valuable in some instances where there is no other way.
If you go down the table path, it will be easier at first, less cross-browser capable, much more coding will be involved, harder to maintain, and later you will find you cannot achieve all the effects you may desire. Here's a liquid design that avoid's the use of tables. Note how wonderfully simple (and W3C valid) the HTML is. The style sheet is a little more complex, but not compared to tables, and a browser will cache the style sheet for all the pages on your site that use it, meaning you'll save a ton of bandwidth over a similar table design.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!-- Add some other headers if you like, such as keywords, here. -->
<title>Liquid XHTML Without Tables</title>
<script type="text/javascript"></script>
<style type ="text/css" media="all">
@import "default.css";
</style>
</head>
<body style="color: #DDDDDD; background-color: rgb(0, 0, 0);">
<div id="topbackground">
Top div.
</div>
<div id="maincontainer">
<div id="sidebar">
This is a sidebar.<br /><br /><br />Further down the sidebar.
</div>
<div id="content">Content div.<br /><br /><br />Further down the sidebar. Further down the sidebar.<br /><br /><br />Further down the sidebar. Further down the sidebar. Further down the sidebar.
</div>
</div> <! -- End of the maincontainer div -->
<div id="bottomdiv">
Bottom div.
</div>
</body>
</html>
CSS:
Code:
html {
height: 100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
padding: 0;
margin: 0;
background: cyan;
}
#topbackground {
position: absolute;
z-index: 2;
top: 0;
left: 0;
margin: 0em 0em 0em 0em;
padding: 0em 0em 0em 0em;
background: red;
width: 100%;
height: 230px;
}
#maincontainer {
z-index: 1;
height: 100%;
min-height: 100%;
top: 0;
left: 0;
margin: 0px 4% -100px 4%;
padding: 0;
background: blue;
}
body>#maincontainer {
height: auto;
}
#content {
margin: 0;
padding: 234px 8px 100px 8px;
background: transparent;
}
#sidebar {
margin: 0px 8px 4px 0px;
padding: 234px 4px 4px 4px;
float: left;
width: 110px;
height: 210px;
background: white;
color: black;
}
#bottomdiv {
position: relative;
width: 100%;
clear: both;
height: 100px;
margin: 0;
padding: 0;
background: green;
}
This design works accross IE, Firefox (Gecko), and Opera that I've tested, probably works with many more. You'll note there is never anything below the bottom div and scroll bars always work well. Also note that we were able to use % for sizes and that resizing the browser dynamically changes our webpage, which is what is meant by a liquid design.
Also, for browsers that don't support style sheets such as cell phones, it fails gracefully, providing the content in the correct order and with basic formatting. More use of <Hx> tags and <p> tags within the divs would improve this even more.
You'll note that with this design, some absolute positioning was necessary, but the whole design would be impossible without being careful about its use.
Hope that helps. I know it took me forever to get down to something relatively simplistic that worked. If you have questions about why I did something specific, let me know.
