Fluid 3-column layout
…and now we come to what A List Apart calls “the Holy Grail” of layouts - the fluid 3-column layout. This is my version, brought upon by a request made on a message board for a 3-column layout where the designer could vertically center-align the sidebar content. Amazingly, I got it to work for her - but it didn’t work in anything but Firefox and IE6 (that’s all she was worried about, so I stopped there). However, I became obsessed with trying to figure out a way to accomplish the 3 column layout in a way that was better than anything I’d found. After reading the A List Apart article, and a few others, I put my mind to it and came up with the below tutorial.
Now, personally, my favorite way to do a multi-column layout is to add in background gif images for the column backgrounds. Why do I like this style? I don’t know. I guess I like the option of putting in a cool tiled background, if I really want it, rather than a solid color. Of course, there are drawbacks - the only one I can think of off the top of my head is if someone comes to the site with images turned off - but in a case like that, I believe if you can see the content, then all is well (since most people who have images turned off just want to see the content anyway!)
However, to do it in a 2 column layout is easy. But a 3-column? With the center fluid? How could it be possible?
Well, I’ll tell you.
Below is my version on things. It is not, by far, the end-all on how to do this. As mentioned previously, there are other ways to do it. This is just my version, and in all browsers I have available to me, it works just fine and dandy.
So let’s get to it.
First, you need to start off with two background images. In this example, my left and right sidebars will be 200 pixels wide. So the two background images need to be - you guessed it - 200 pixels wide. In this example, the background for my sidebars are the same color - so we’re only going to use one. But by all means, if you want two different colors, go for it.
This is the desired layout:
This is your HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="stylesheet" href="stylesheet.css" />
<!--[if lte IE 5.5000]>
<link rel=”stylesheet” href=”ie.css” media=”screen” />
<![endif]–>
</head>
<body>
<div id="outer_left">
<div id="header">
header here
</div>
<div id="wrapper">
<div id="left">
left column here
</div>
<div id="content">
Nine undervear keepin ker oompaloomp die weiner sparkin, ya. Hast, leiderhosen waltz dummkopf lookinpeepers kaboodle makin stein morgen achtung du. Pretzel gestalt, spritz lookinpeepers die frankfurter noodle dummkopf. Octoberfest glockenspiel pretzel das wearin morgen weiner leiderhosen nutske, hast. Buerger pukein hans relaxern deutsch footzerstompen deutsch hast die ist nicht, haus dummkopf, meister.
</div>
<div id="right">
right column here
</div>
<hr />
</div>
</div>
</body>
And the global CSS stylesheet (called “stylesheet.css” in the head of the document):
* {
margin:0;
padding:0;
border:0;}
body {
font-family: Arial, Helvetica, sans-serif;
color:#000;
background:#FFF;
text-align:left;}
#outer_left {
width:100%;
background:url("bg.gif");
background-repeat:repeat-y;}
#header {
width:100%;
text-align:center;
height:150px;
background:#A6885A;}
#wrapper {
background:url("bg.gif");
background-repeat:repeat-y;
background-position:right top;
padding:0 200px;}
#left {
float:left;
width:200px;
margin-left:-200px;
padding:10px 0;
display:inline;}
#content {
float:left;
width:100%;
position:relative;
background:transparent;}
#right {
position:relative;
float:left;
width:200px;
padding:10px 0;
margin-right:-200px;}
hr {
clear:both;
visibility:hidden;}
..and finally, the stylesheet for IE (as noted in the head of the document within the conditional comments tag as “ie.css”):
* {
height:0;}
And that’s all there is to it!
This layout was tested on Windows XP with:Firefox 1.0.7, IE 6, IE 5.5, IE 5.1, Netscape 7 and Opera 8. Also tested on Mac OSX: Firefox 1.0.7, Safari 2.0 and IE 5.2.
I will note a couple of things, just for the sake of interest. What I did to enable he possibility of background gifs on either side was to contain the items within two wrapper elements. One, #outer_left, is the outermost div, and contains the left sidebar background. The other, #wrapper, is the secondary div which has the background set to top and right, and also contains all the inner elements. The #content div must have the background set as transparent, or it will over the #outer_left div background.
The <hr /> tag could be replaced by a footer div, if you so desired. Just be sure to remove the “visibility:hidden” line if you choose to do this.
Now, it was brought to my attention in some previous comments that it would be nice to have this layout with the ability to have the divs source ordered for SEO purposes (meaning to have the content div at the top in the HTML document so it would be given more importance with the search engines - but have it appear as normal when viewed through the browser). This is a bit more difficult, as it relies on some absolute positioning - which would throw the stuff mentioned above out of whack.
However, I did manage to accomplish it.
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<meta name=”description” content=”" />
<meta name=”keywords” content=”" />
<meta http-equiv=”imagetoolbar” content=”no” />
<meta name=”MSSmartTagsPreventParsing” content=”true” />
<link rel="stylesheet" href="stylesheet.css" />
<!--[if IE 6]>
<link rel=”stylesheet” href=”ie6.css” media=”screen” />
<![endif]–>
<!--[if lte IE 5.5000]>
<link rel=”stylesheet” href=”ie5.css” media=”screen” />
<![endif]–>
</head>
<body>
<div id="outer_left">
<div id="wrapper">
<div id="content">
Nine undervear keepin ker oompaloomp die weiner sparkin, ya. Hast, leiderhosen waltz dummkopf lookinpeepers kaboodle makin stein morgen achtung du. Pretzel gestalt, spritz lookinpeepers die frankfurter noodle dummkopf. Octoberfest glockenspiel pretzel das wearin morgen weiner leiderhosen nutske, hast. Buerger pukein hans relaxern deutsch footzerstompen deutsch hast die ist nicht, haus dummkopf, meister.
</div>
<div id="left">
left column here
</div>
<div id="right">
right column here
</div>
<hr />
</div>
</div>
<div id="header">
header here
</div>
</body>
Note that the header is now placed at the bottom of the HTML document - however, due to the CSS, it will visually be placed at the top. The #content is placed first, even before the left sidebar - however, visually, it will be between the left and right sidebars.
Now, let’s view the CSS to accomplish this:
* {
margin:0;
padding:0;
border:0;}
body {
font-family: Arial, Helvetica, sans-serif;
color:#000;
background:#FFF;
text-align:left;}
#header {
position:absolute;
left:0;
top:0;
width:100%;
text-align:center;
height:150px;
background:#A6885A;}
#outer_left {
position:absolute;
left:0;
top:0;
width:100%;
background:url("bg.gif");
background-repeat:repeat-y;}
#wrapper {
position:relative;
left:0;
top:0;
background:url("bg.gif");
background-repeat:repeat-y;
background-position:right top;
padding:0 200px 150px 200px;}
#left {
position:relative;
left:-200px;
top:150px;
float:left;
width:200px;
margin-left:-100%;
padding:10px 0;}
#content {
position:relative;
top:150px;
float:left;
width:100%;
position:relative;
background:transparent;}
#right {
position:relative;
top:150px;
float:left;
width:200px;
padding:10px 0;
margin-right:-200px;}
hr {
clear:both;
visibility:hidden;}
And the two stylesheets for IE6 and IE 5.5 and below:
ie6.css
* {
height:0;}
#header {
position:relative;}
#left {
left:200px;}
ie5.css
* {
height:0;}
Again, if a footer is desired, just replace the <hr /> tag with a footer div, and be sure to remove the “visibility:hidden” line.
This layout was successfully tested in the above mentioned browsers - however, IE 5.2 for Mac has a few issues and this layout will currently not display properly. I’ll get on that, though, and post an update when I figure it out!
There you have it - please enjoy! (and if you test it on a browser I don’t have access to, please let me know how it goes!)
Posted by
March 15th, 2006
