Three Column Layout in Less Than Ten Lines of CSS

Many developers have dedicated their time and efforts such as me to try to move developers over to the proper standards of web code and away from older or non w3c approaches to site designs. One of these long used but improper approaches to site designs is the dreaded table use for your sites layout.

Tables were never meant to be a websites layout backbone as IE and Microsoft FrontPage have been advocating for years. Today however most developers know to stay away from tables unless to display data in an actual table format and now stick to XHTML and block elements such as division boxes (

).

The problem that arises is that even though the use of CSS and block elements actually gives us the developers a more dynamic and cleaner way for working with complex layout structures it lacks some of the essentials in creating what we consider to be a standard layout in the ideals of web design. One of these paradoxes is the three column layout and our understanding of how this layout should act according to how we all have grown with the web. If you think about what you would consider a three column layout to be and how it should function you might come up with the following:

  • Any column height determines the overall height of the layout.
  • Fluid layout and wont break under browser font size changes.
  • Column colors and center cell color can differ.
  • Column colors and center cell color can extend to the full height of the layout.

Seems simple enough, but in fact many great minds have been trying to accomplish the best approach to meet these four simple requirements or more with use of XHTML and CSS for years were a table three column layout can already achieve this. I myself have been spending a great amount of time trying to come up with the most compliant and cross browser friendly method that achieves the above requirements for a three column layout. My first attempts were to try to study what is already out there and see what ground has been broken in this three column layout battle and I found lots of creative yet very similar method out there that even got me distracted from what might be accomplished is you simply would think outside of the box.

Everything I had found tackled the three column layout and above requirements by doing what we have been taught for years now about proper block element design and that is something call the box model method that says we must nest elements to properly apply padding, margin and height styles. So it was no wonder that I too got sucked into this approach to accomplish the perfect three column layout. What I found that if you simple stop and rethink maybe even give and take a little you can accomplish this three column layout but do so while making it completely cross browser friendly and less than 10 lines of CSS.

Yes you read right I did say that I have accomplished this most sought after layout with less than 10 lines of CSS code. So with the little history lesson out-of-the-way and our full understanding as to why were are even sitting here talking about this layout we can begin to get started with this tutorial.

In this tutorial I am going to show you how to create the perfect three column layout. This three column layout is designed under the common screen resolution of (1024×768) and meets all of our above requirements while again under 10 lines of CSS code! Let’s get started by first creating our html structure for our three column layout.

Ok so far this is a great structure to create a three column layout. We have our header and our footer boxes not always a must but give our layout that desired look we are after. Next we have our two left and right columns and in the center of the two we have our center column. Each column has a nested div box in order for us to add padding to our columns and the content they will hold.

Ok now let’s move on to our CSS portion of this tutorial.

body{}
#main{}
#wrapper{}
#header{}
#footer{}

.column{}
.center{}

.caps{}
.column div, .center div {}

Let us break down the first five CSS rules.

body {text-align:center; background-color:#ccc;}
#main{margin-left:auto; margin-right:auto; width:980px;}
#wrapper{float:left;}
#header{height:90px; border-bottom:#ccc solid; border-width:1px;}
#footer{height:30px; border-top:#ccc solid; border-width:1px;}

Our first rule is pointing directly to our documents body tag and has a text align of center and a background color of light gray. I set our body’s tag to have a text align of center for IE5 browser to center our proceeding child elements to the pages over all width and I gave our body a background color to contrast our three column layout once it’s finished.

Our next rule is named #main that has two margin rules (margin-left and margin-right) both of which are set to auto. We also give a set width of 980px to our #main rule. We set its margins to auto in order to align it to the center of our pages over all width and give it a width of 980px for a safe real state under a 1024×768 standard screen resolutions.

Next is our rule named #wrapper and it has a float rule of left to properly float any child elements nested within it that also carry a float rule.

Our last two rules (#header & #footer) are for our header and footer elements that are self-explanatory and of user preference.

Moving on lets look at our next two CSS class rules.

.column{width:165px; float:left;}
.center{width:650px; float:left;}

Our first class rule is .column and is a rule for both our left and right columns and has a width of 165px and another float set to a left in order to properly float all our columns next to each other rather than over each other.

Our next class rule is .center and is for our center column. This class rule also has a width and float rule but this time I use the remaining width of our 980px to fill up with our center column. (980 -165 -165 = 650)

And last but not least our last two CSS class rules.

.caps{width:980px; float:left; background-color:#FFF;}
.column div, .center div {padding:15px}

Ok so our first class rule here is .caps and is used in our header and footer elements. I call it caps but because visually it’s like a soda can, our header and footer elements cap both the top and bottom of our three column layout. This rule “.caps” has a width of 980px to span our fully allowed width and again a float left rule to properly stack header and footer over and under their sibling elements.

Now our last CSS class rule points to our left and right columns child div element .column div as well as our center columns child div element .center div. This rule gives all column children div elements a padding style of 15px around all sides to space out content within each column.

Great now we have a complete understanding of our HTML structure and our CSS rules it’s time to point out what makes this approach so different from the others. Remember our requirements?

  • Any column height determines the overall height of the layout.
  • Fluid layout and wont break under browser font size changes.
  • Column colors and center cell color can differ.
  • Column colors and center cell color can extend to the full height of the layout.

Ok right now as this tutorial stands we have successfully completed 3 out of the 4 requirements for our three column layout. The only one that is not yet fulfilled is the last requirement.

Column colors and center cell color can extend to the full height of the layout.

If I was to go in to our column classes and play around with our columns background colors we indeed are in control of each of our columns color. The problem is however once you begin to add content to anyone of the columns you soon realize that the colors of each column do not extend to the full height of the layout when extending the layouts height manually with content in any one of the columns.

The solution to our last requirement is not one of pure CSS, CSS hacks, box model padding and margin tricks. What I suggest is a background image to define all three columns and colors that can span the full height of our #wrapper CSS rule. In Photoshop I have created an image that has a width of 980px (our respected real state for a standard screen resolution) and a height of 500px. I then divide up the image in to our three column sizes (left=165px center=650px right=165px) and added a drop shadow to my left and right sides that points in over my center column like so.

three column layout background

Next change the canvas size of this image to be that of only 1px so our browser only has to load a tiny strip of our background image and with the use of CSS we will tell our browsers to repeat the image vertically for us. By making our image only 1px tall it makes our background load nearly at 1 second down all the way to a 14.4 dial up modem so no poor loading times should result from this method.

Now in Photoshop save the image for web and make it a gif image and name it whatever you like. My background image has drop shadows that consume up to 9 shades of gray so I tell my save for web dialog to only utilize up to 9 colors for my background gif. The color utilization for you and your own background color will vary so please take note of this.

Our last step is to go back to our #wrapper CSS rule and add our new background image and repeat it vertically.

#wrapper{float:left; background:url(images/standard.gif) top left repeat-y;}

See how we have added a background rule (not a background-image rule) this rule supports images, alignment and repeat styles. URL is the location of the image relative to our document and top left is how I want to position the image in my elements background while repeat-y repeats the image in a y-axis (vertically).

That’s it folks, we have successfully created a fully cross browser friendly three column layout in under 10 lines of CSS code.

CONCLUSION
Some may say that this is not the best way to accomplish this three column layout with our above requirements while at the same time will point to far more complex and long-winded CSS rules to accomplish the same three column layout. Some of these complex methods to the three column layout consist of hacks to make them cross browser friendly or simply do not support all browsers. This is simply a method I like to use for the convenience of it and light weight / simplicity of the structure and CSS.

VIEW WORKING EXAMPLE NOW

Thanks I hope this helps a few other there.
Devin R. Olsen

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:
TwitterFacebookGoogle Plus