Sep 9, 2009

Three Column Layout in less than 15 lines of CSS

Posted by Devin R. Olsen on in CSS Tutorials | 10 comments

This is a follow-up to my Three Column Layout in less than 10 lines of CSS tutorial but in this one we are going to be using, no background images no JavaScript and 100% pure CSS. This method only uses 14 CSS rules making it very light weight, easy to maintain, SEO and cross browser friendly. If for what ever reason you feel you might want to use this method but don’t want to follow the tutorial I have here you can view / build a working demo by going to my:

View Working Example:

The Three Column Layout Builder Tool is a tool that belongs to a set of tools titled project Mariah I develop to make you the reader’s life much easier to practice W3C and best practices in web design. Ok let’s get onto the tutorial for the rest of the readers.

Lets start off with a blank document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>

</body>
</html>

Now in your body tags add the follow html structure. We will start off by breaking down how this structure is layout out and why its important to us before jumping into the CSS.

<div id="wrap" class="main">
    <div id="float" class="main float leftRightBdr">
    <div id="header" class="float topBottomBdr">

    	<h2>HEADER</h2>
    </div>
       <div id="center" class="float leftRightBdr">

            <!-- LEFT COLUMN -->
            <div id="left" class="columns float">
            </div>

            <!-- RIGHT COLUMN -->
            <div id="right" class="columns">
            </div>

            <!-- CENTER COLUMN CONTENT CELL -->
            <div class="content" id="content">
            </div>

		   </div>
        <div id="footer" class="float topBottomBdr">
            Footer
        </div>
    </div>
</div>

Take a look at our first main containing div that we have given an id of “wrap” and a class of “main“. We use a main container or “wrapper” block around our entire layout to align the whole layout to our documents center. Next we have another containing div box with our first that has and id of “float” and class of “float“. We use this second container or “wrapper” block around our layout as well to allow a layout align of center but also support div block floating ability’s.

Next we have a div block with an id of “header” and this is the location of our layouts header information. There is also a div block with an id of “footer” down below and this is the location of our footer information. Between the “header” and “footer” blocks is a third block that has an id of “center”. The “center” block acts as another container or “wrapper” for our three columns (content, left and right).

The first div block listed in our “center” block is a block with a class of “content“. Next is the div block with the id of “left” and last we have our last div block with the id of “right“. The “content” div block is indeed our location for where we want our center columns information to be stored so don’t let the names throw you off.

Perfect three column layout

Ok lets take a look at our CSS structure. Add the following to your header tags.

<style type="text/css">

</style>

In between these tags add the following css class rules.

body          {text-align:center;}
.main         {width:980px !important; width:982px;}
.columns      {width:145px; float:left; padding:10px; position:relative; z-index:100; overflow:auto;}
.float        {float:left; display:inline;}
.topBottomBdr {border:#000 solid; border-width:0px ">1px ">0px ">1px 0px 1px 0px;}
.leftRightBdr {border:#000 solid; border-width:0px ">1px ">0px 1px 0px 1px;}
.content      {margin:15px;}

Our first rule here is our body tag and its declaring a text-align of center. We set our body to be a text-align of center to fix IE5 and IE6 issues with the use of margin floats to center our layout to our document.
Our second rule is .main and has a width of 980px and we again set this width to make our layout compatible with the standard screen resolution of 1024×768. You will notice that we have used something called !important here. If you don’t know what !important is I suggest you read this quick break down on how it helps us the developers. Just note that we use two widths here and the !important to isolate IE6 and below who have problems with extra width totals because of borders.
Our Third rule is called .columns. Here we have set our width to be 145px (the amount of our desired left and right column width minus the 10px padding in both columns). We have set the float to be that of left and a padding of 10px, position of relative, z-index of 100 and an overflow of auto. We set our float to be left to abide by the rest of our layouts flow and our desired results. A padding of 10px is added to give cushion between our content and our div column walls. The position is set to relative to give allow use to work with our z-index style.The z-index style is a way to order our browsers rendering hierarchy and there for our columns are always on top. Our last style is the overflow rule and we set it to auto and this leave it up to our browser to decide if a hidden or scroll action should be taken place. With overflow auto if our left and right columns are shorter than the content will allow the browser will take action.
Our fourth rule is named .float and this rule give a float of left to the rest of our columns but also has a display of inline to make our float compatible with IE6.
The fifth and sixth rule are of preference and are our borders to divide up our columns footer and header div blocks from one another. topBottomBdr =Top Bottom Border while leftRightBdr = Left Right Border.
Our last CSS rule is named .content and it has a margin of 15px in order to give our center column a padding between its content and div blocks walls. We also use a position of absolute and top 0px to override our content block from pushing our left and right column below its desired content amount.
The patients usually go back home from buying levitra online http://appalachianmagazine.com/2017/11/09/the-wapiti-appalachias-extinct-and-huge-deer/ PSRI in high spirits after their treatment. It was discomforting to say the least. buy cialis pharmacy Igdalsky said the track was reviewing its records of professional viagra cheap how many announcements were made but conceded some fans didn’t hear it. There are a number of causes associated with tadalafil overnight shipping premature ejaculation.

Wow that was a lot… are you ready to move on? Ok add these last CSS id rule to our CSS style tags in your documents header.

#wrap   {margin-left:auto; margin-right:auto; text-align:left;}
#float  {background-color:#CCC;}
#center {margin-left:165px; margin-right:165px; width:650px!important; width:; background-color:#FFF; position:relative;}
#left   {margin-left:-164px;}
#right  {margin-right:-164px; float:right;}
#header {width:100%; height:100px; background-color:#FFF;}
#footer {width:100%; height:20px; background-color:#FFF;}

Ok here we have our last seven css rules so let break down these last few.

Our first CSS rule is named #wrap and is the id for our main div block. Its margin-left and margin-right is set to auto to align our layout to the center of our document but also used over (margin:auto;) to fix IE6 centering issues. We also set its text-align to be left in order to override our body text-align center fix.
Our next CSS rule is for our next container div block called #float. Here we set its background color to be what ever we prefer resulting in changing our left and right columns color.
Next is the #center CSS rule that also has a margin-left and margin-right but these are set to the desired width of our columns with are compensating for our left and right columns padding of 10px. The width is set to be that of 650px because our over all layout width (980px) minus our desired column width (165px) x 2 columns = 650px. (Notice that we again use the !important procedure to fix IE6 issues.) Finally we set its background-color to be that of #fff(white) in order to differ our center columns background color from our columns background color. Because #center is our parent container for our .content div block that uses a position of absolute we must then give our #center a position of relative in order to make sure our .content block doesnt break our of our layouts flow and structured order.
Next we have the #left rule and #right rule. Our #left rule has a margin-left of -164px and we do this to offset the left column by the desired column widths from our center div block plus the 1px for our left and right borders. For our right column we again offset our right column by its desired width but this time we use a margin-right style. In our #right rule we have also broken our right column out of our layouts flow by using the float right style.
Next is our #header and #footer rules and these are up to you the developer as the only state widths, heights and background colors.

Guess what folks, you have just created thee perfect 100% pure light weight cross browser friendly CSS three column layout. If you would like to see the results of our labor click the link below to see a working example / layout builder tool.

I hope this help many of my readers and also inspires people to create some awesome designs.

Thee Column Layout Builder Tool / Live Preview

Devin R. Olsen