December 23, 2004

The Difference Between Liquid and Fixed Design

By no means of the imagination am I a web designer by heart. I think the phrase is ?designer challenged.?

That said, I?d like to clarify two classic techniques, liquid and fixed designs. A fixed design indicates fixed dimensions, for example a three column fixed layout.

<html>
<head>
<title>Example of a Three Column Fixed Layout</title>
<style type="text/css">
<!--
#header {
background: #6666CC;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 50px;
}
#leftcolumn {
background: #CCCCFF;
position: absolute;
top: 50px;
left: 0px;
width: 100px;
height: 500px;
}
#rightcolumn {
background: #CCCCFF;
position: absolute;
top: 50px;
left: 700px;
width: 100px;
height: 500px;
}
#contentcolumn {
background: #FFFFFF;
position: absolute;
top: 50px;
left: 100px;
width: 600px;
height: 500px;
}
#footer {
background: #6666CC;
position: absolute;
left: 0px;
top: 550px;
width: 800px;
height: 50px;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcolumn">Left Section</div>
<div id="contentcolumn">Content Section</div>
<div id="rightcolumn">Right Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

Please click here to see the example.

So what do we notice about fixed design. All of the container elements are assigned to a fixed location in pixels. The pixels set the screen to 800px by 600px. This will set a consistent look and feel across all screen resolutions.

The liquid philosophy makes use of floats and clear attributes to set up a page that adjusts to all monitor resolutions. The float attribute sets the container element on the side of the page. The clear setting in the footer ensures that floated divs don?t intrude on the other elements. A sample liquid layout is

<html>
<head>
<title>Example of a Three Column Liquid Layout</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #6666CC;
width: 100%;
height: 10%;
}
#leftcolumn {
background: #CCCCFF;
float: left;
width: 15%;
height:500px;
z-index: 1;
}
#rightcolumn {
background: #CCCCFF;
float: right;
width: 15%;
height:500px;
}
#contentcolumn {
background: #FFFFFF;
float: left;
height: 500px;
}
#footer {
background: #6666CC;
clear: both;
height: 10%;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcolumn">Left Section</div>
<div id="rightcolumn">Right Section</div>
<div id="contentcolumn">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

Please click here to see an example.

Posted by Elyse at December 23, 2004 10:04 AM | TrackBack