Many Web builders prefer using fixed-width page layouts for page design because they produce precise and predictable results. This approach closely mimics print layout, which is a significant comfort factor for designers and visitors alike; it's also the best way to handle content that includes lots of large images and other elements that don't flow well in a liquid layout.
From table to div
For years, designers would create fixed-width page layouts with tables. The table's columns and rows are a passable analogue of the designer's layout grid, so it's not surprising that designers adapted HTML tables for use in page layout.
However, table-based layouts have significant problems. Besides the fact that it's semantically improper to use tables for layout, the resulting code is messy, hard to read, and even harder to maintain--especially when it includes merged table cells and nested tables.
Using divs for page layout works much better. In addition to the karmic goodness of following the recommended best practices, leaner code loads faster and is easier to work with.
The formatting attributes of tables and table cells lend themselves to fixed-width layouts by making it fairly easy to specify the sizes of those elements. But you can accomplish the same thing with divs by giving divs exact dimensions and using absolute and relative positioning to place those divs on the page.
A fixed-width example
Figure A shows a typical fixed-width layout consisting of a header at the top, a three-column content area (a main content column flanked by two sidebars), and a footer at the bottom of the page. All of the elements are fixed widths; they do not resize with changes in the browser window.
The following XHTML markup produces the page shown in Figure A. (The content is truncated for the sake of brevity.)
<body>
<div id="head">
<h1>header</h1>
</div>
<div id="columns">
<div id="side1">
<h3>side1</h3>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
<li>Or bends with the remover to remove</li>
<li>Oh, no, it is an ever fixed mark</li>
</ul>
</div>
<div id="content">
<h2>main content</h2>
<p>That looks on tempests ... his height be taken.</p>
<p>But bears it out ... alteration finds.</p>
<p>Whose worth's unknown, ... the remover to remove.</p>
</div>
<div id="side2">
<h3>side2</h3>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
</div>
<div id="foot">
<h3>footer</h3>
<p>Or bends with ... height be taken. </p>
</div>
</body>
Here's the CSS code that styles the page as a fixed-width layout.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
h2,h3 {
margin-top: 0px;
padding-top: 0px;
}
div#head {
position: absolute;
width:750px;
height:100px;
left:0px;
top: 0px;
background-color: #FFFF66;
}
div#columns {
position: relative;
width: 750px;
top: 100px;
background-color: #CCCCCC;
}
div#side1 {
position:absolute;
width:150px;
top: 0px;
left:0px;
background-color: #FF6666;
}
div#content {
position: relative;
width: 450px;
top: 0px;
left: 150px;
background-color: #999999;
}
div#side2 {
position:absolute;
width:150px;
top: 0px;
left: 600px;
background-color: #00FF66;
}
div#foot {
position: relative;
width: 750px;
clear: both;
margin-top: 100px;
background-color: #99FFFF;
}
Do you need help with CSS? 
1
Anja G. - 19/07/05
The only problem I found when creating a centered three column design, is that if any of the outer columns is longer than the centered one, the content gets obscured by the footer. Is there any way to fix it without resorting to the 100% height of the #div column? It seems to create a huge space between the bottom of #div content and the footer.
» Report offensive content
2
adsfadfs - 15/02/07
I very good. I got the idea css
» Report offensive content