Constructing Fixed Layouts with a Simple CSS Framework

Definitely, providing the existing CSS framework with the capacity for working with fixed web page layouts is a straightforward process that can be tackled with minor hassles. Basically, incorporating this feature only requires coding an additional CSS file that assigns fixed widths to each column that comprises the layout in question.

So, based upon this concept, below I included the signature of this brand new CSS file. As you’ll see in a moment, it will make building fixed designs a no-brainer procedure. Here’s how it looks:

#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: 600px;

}

/* 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;

}

That was quite easy to grasp, wasn’t it? As you can see, all that I did above was build a new CSS file that assigns fixed widths to the selectors responsible for styling the main columns of a web document. In this case, these columns will also be centered on the browser, but this characteristic is completely optional and it can be easily modified to suit your own preferences and needs.

So far, so good. At this point, I demonstrated how to provide the CSS framework with the ability to construct fixed web page layouts. So, what comes next? Well, you may want to see how the prior CSS file can be used within the context of a concrete example.

Therefore, in the final section of this tutorial I’ll be setting up a practical example for you, to help you see how simple it is to build a fixed design using this CSS framework.

Go ahead and read the next few lines. We’re almost done!