Creating a Three-Column Fixed Design with a Simple CSS Framework - Constructing a fixed three-column web page design
(Page 3 of 4 )
To be frank, providing this CSS framework with the ability to build a fixed web page layout composed of three main columns is only a matter of coding a brand new CSS file. It's really that simple. Of course I could use the same file listed in the previous section to perform this task; however, I'm going to use a separate one to make it easier for you to grasp how to construct the aforementioned layout.
Here's the CSS file, which is charged with rendering this fixed design:
#header,#footer{
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #9cf;
}
#navbar{
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #dcdcdc;
}
#navbar li{
display: inline;
}
#mainwrapper{
clear: both;
width: 800px;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
background: #eee;
}
#mainwrapper .leftcol{
position: relative;
float: left;
}
#mainwrapper .rightcol{
position: relative;
float: right;
}
#leftbar{
width: 200px;
}
#centerbar{
width: 400px;
}
#rightbar{
width: 200px;
}
/* section title */
.title{
font: bold 12pt Arial, Helvetica, sans-serif;
color: #036;
background: #9cf;
margin: 0;
padding: 10px;
}
/* generic box */
.box{
background: #fff;
border: 1px solid #ccc;
margin-bottom: 18px;
}
.box h2{
font: bold 14pt Arial, Helvetica, sans-serif;
color: #039;
margin: 0 0 18px 0;
}
.box h3{
font: bold 13pt Tahoma, Arial, Helvetica, sans-serif;
color: #039;
margin: 10px 0 18px 0;
}
.box h4{
font: bold 12pt Tahoma, Arial, Helvetica, sans-serif;
color: #039;
margin: 0 0 18px 0;
}
.box h5{
font: bold 11pt Tahoma, Arial, Helvetica, sans-serif;
color: #039;
margin: 0 0 18px 0;
}
.box h6{
font: bold 9pt Tahoma, Arial, Helvetica, sans-serif;
color: #039;
margin: 0 0 18px 0;
}
/* generic container */
.content{
padding: 10px;
}
p{
font: normal 8pt Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
As you can see, the above CSS file doesn't differ too much from the one shown in the prior section. Of course, the most important difference to stress here is that this last file declares an additional "#rightbar" selector, which can be used to place a third column on the right of the corresponding web document.
Now that you hopefully grasped how the previous CSS file doe its thing, it's time to use it, right? Therefore, in the final section of this article, I'm going to show you how to use the file in question for building a fixed web page layout comprised of three primary columns.
To learn how this example will be developed, please click on the link below and keep reading.
Next: Building a three-column fixed web page design >>
More Style Sheets Articles
More By Alejandro Gervasio
