equal sidebars, longer content
Have I ever mentioned how much I love a challenge? I love to play with CSS.
Anyway, there was a question on one of my email lists the other day, and I was sure I could accomplish it. Bascially, someone wanted a site layout where it was your basic 3-column thing. Content in the center and two sidebars flanking it. Simple enough. But the trick was - they wanted the two sidebars to always have the same length as each other - no matter which one was the longest. The center content section would have nothing whatsoever to do with the length of the two sidebars. Oh, and no “faux columns” tricks, or javascript to be used.
Could this be done using straight up CSS? I thought so, but I could forsee some problems with it.
Wouldn’t you know it - I was right.
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" />
<style type="text/css">
/*\*//*/
#inner {margin-right:-490px;}
#inner2 {margin-left:-480px;}
/**/
</style>
<!--[if IE 7]>
<link rel=”stylesheet” href=”ie7.css” />
<![endif]–>
<!--[if lte IE 6]>
<link rel=”stylesheet” href=”ie6.css” />
<![endif]–>
<!--[if lte IE 5.5000]>
<link rel=”stylesheet” href=”ie5.css” />
<![endif]–>
</head>
<body>
<div id="wrapper">
<!-- this is the outer wrapping container with black border -->
<!-- start center column -->
<div id="center">
<p>text here</p> <p>text here</p> <p>text here</p>
<p>text here</p> <p>text here</p> <p>text here</p>
<p>text here</p> <p>text here</p> <p>text here</p>
<p>text here</p> <p>text here</p> <p>text here</p>
<p>text here</p> <p>text here</p> <p>text here</p>
<p>text here</p> <p>text here</p> <p>text here</p>
<p>text here</p> <p>text here</p> <p>text here</p>
</div>
<!-- end center column -->
<div id="outer">
<!-- this is the white background color for the left sidebar, gray 10px border -->
<div id="inner">
<!-- this is the container for the right side.-->
<div id="iefix">
<div id="inner2">
<!-- this is the text positioning for the left sidebar column... -->
<div id="content">
<!-- and this is the text width for the left sidebar -->
<p>Left Content goes here : Left Content goes here : Left Content goes here
: Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
<p>Left Content goes here</p> <p>Left Content goes here</p>
</div></div>
<div id="right">
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<p>Right Content goes here</p>
<div>
<div class="clearer"></div>
</div>
</div>
<div class="clearer">
</div>
</div>
<div class="clearer">
</div>
</div>
</body>
styles.css
*{
margin:0;
padding:0;
border:none;
z-index:0;
}
body {
text-align:center;
background-color:#777;
}
#wrapper {
width:700px;
margin:0 auto;
background-color:#999;
padding:10px;
border:solid #000;
border-width:0 1px 1px 1px;
}
#outer{
width:200px;
background:#FFF;
border:10px solid #CCC;
float:left;
text-align:left;
}
#inner{
background:#FFF;
float:right;
width:200px;
border:10px solid #CCC;
position:relative;
margin:-10px -429px -10px 0;
left:60px;
}
#inner2{
float:left;
width:200px;
position:relative;
margin-left:-419px;
left:-60px;
}
#content {
width:180px;
margin:0 auto;
}
#right {
width:180px;
margin:0 auto;
}
.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
#iefix {
position:relative;
width:100%;
}
#center {
text-align:left;
width:240px;
padding:10px;
float:right;
margin-right:220px;
}
ie7.css
#outer {
margin-left:-700px;
}
#inner {
margin-left:210px;
}
#center {
width:240px;
float:left;
margin-left:220px;
}
ie6.css
#outer {
margin-left:-700px;
}
#inner {
margin-left:210px;
}
#inner2 {
margin-left:-415px;
}
#center {
width:230px;
float:left;
margin-left:115px;
}
ie5.css
#outer {
margin-left:-685px;
}
#inner {
margin-left:229px;
}
#center {
width:250px;
float:left;
margin-left:110px;
}
Now, granted, there are a few limitations. As you can see, the center content column is the same color as the wrapping container. However, if you wanted to change the background color (and put a border) around the center text and make it look like a separate column, you could. Just change it in the #center area of the stylesheet. But the sidebar columns must both remain the same color - background and border colors will remain the same.
This layout was tested on PC: Firefox 1.5, IE 6.0, IE 5.5, IE 5.1, Netscape 7, Opera 7, Opera 8, Opera 9; and on Mac IE 5.2 and Safari 2.0. It was also tested in Mozilla 1.2.1 on PC and Mozilla Firefox 1.0 on Mac - both with the same results: it’s screwed up. Since I don’t have Mozilla 1.0 on my PC, I’m guessing it has the same screwed appearance. But so far, that’s the only browser I have an issue with. Besides, it actually works in freaking IE 5.2 on a Mac! 
UPDATE — 8/23/2006 I discovered through other testing that I was wrong about Netscape 7 - it’s funky in that browser. However, I did get some thing changed around, and some new browsers to test in. I can now happily report that, although it’s a bit messed up in Netscape 7.1 on PC, it does work in the following:
On PC: Mozilla 1.7.1, Mozilla Firefox 1.5, Internet Explorer 7 (beta 3), IE 6, Ie 5.5, IE 5.1, Opera 7 (with a *tiny* margin at the bottom of the right column - making it *slightly* shorter than the left column), Opera 8, Opera 9, and Netscape 8.
On Mac: Mozilla Firefox 1.0, Safari 2.0 and Mac IE 5.2.
Now, what needed to be changed was the addition of an extra clearing div in the HTML, and a bit of conditional comments for IE 7. That was it. The above is changed from the original posted, and now reflects those changes, and the example is also replaced with the fixed one.
Enjoy!
Posted by
August 19th, 2006
