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.
Subscribe and Share!
Did you enjoy this article? Your feedback is very important! I'd like to invite you to keep up to date with the latest posts from Anticlue. We offer several venues. If you have some questions, help can be found here.- Become a Facebook Fan
- Subscribe to Anticlue
- Follow me on Twitter
- Add to Technorati Favorites
- Digg this post
