Creating a Three-Column Liquid Layout with a CSS Framework

If you found it easy to grasp how to use the previous CSS framework to build a two-column web page layout, then when I show you how to use it for creating one composed of three main bars, you’ll see that this process is even simpler.

Actually, providing the framework with the ability to render a layout like the one mentioned above is only a matter of coding a new CSS file that supports adding a right-placed column within a web document. Period.

However, this may sound a bit complicated if I don’t show you how this CSS file really looks. Therefore, I listed its signature below. Here it is:

#header,#footer{

padding: 10px;

background: #9cf;

}

#navbar{

padding: 10px;

background: #dcdcdc;

}

#navbar li{

display: inline;

}

#mainwrapper{

clear: both;

height: 100%;

overflow: hidden;

background: #eee;

}

#mainwrapper .leftcol{

position: relative;

float: left;

}

#mainwrapper .rightcol{

position: relative;

float: right;

}

#leftbar{

width: 20%;

}

#centerbar{

width: 59%;

}

#rightbar{

width: 20%;

}

/* 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 looks pretty similar to the one that I used in the previous section. Nonetheless, in this particular case it includes an additional “#rightbar” selector, which can be used for placing another column on the right side of a web document. Other than that, the other selectors and classes remain the same.

Of course, I could have merged this new file with the one that was utilized for constructing a two-column web page layout, but I decided to keep them separated, so you can grasp more quickly how they work. However, nothing stops you from doing this, if you want to avoid using an extra CSS file.

At this stage, I've explained how to incorporate an additional file into the existing ones that comprise this CSS framework, in this way providing it with the ability to easily construct three-column liquid layouts.

If you're like me, though, you’ll want to see how the file can be used in a concrete example. Therefore, in the last section of this tutorial I’ll be coding a new (X)HTML file, which will be tasked with using this brand new CSS file to display the aforementioned web page layout.

As usual, to learn the full details of this process, please go ahead and read the following section.