Hi alteredskate,
In that particular example the column effect is created by a repeating background gif here.
#content {
border: 1px solid #000;
padding: 0;
[b]background-image: url(images/navbg.gif);/*this is the background colour of the left column */
[/b]background-repeat: repeat-y;
background-position: left top;
}
and the right column colour is the background colour here:
#container {
width: 670px;
margin: 0px;
margin-left: auto;
margin-right: auto;
[b]background-color: #829CC8;/* this is the background colour of the right column */
[/b]border: 1px solid #000;
text-align:left;
}
The image is as wide as the column needs to be and is repeated down the left side of the container. Basically its as simple as that.
The container holds two floats which stretch the outer containers bottom border when any one of the floats is the longest. Because the background of the left column is a repeated gif you always get a full length column colour. The background of the right column is just the normal background colour of the container.
The actual floated columns themselves have no bg colours of their own otherwise they would mess the effect up.
This is the simplest way to achieve two equalising column colours and is completely hack free. If you look at my other two column demos there are examples that don’t even need bg images but are a little more complicated to use.
We can simplify it further here:
You have an outer (Content) that contains two floats. The left side of the Content could have a repeating bg gif that is as wide as the left float. The rest of the content (right column) is just the bg colour of the element.
You then just put your floats inside and you get the illusion of 2 columns. If you were to colour the floats then you would see that they don’t stretch full height but just expand to their content. However since we have already coloured the columns then the floats don’t need to be coloured.
#content {
background-color: #829CC8;/* this is the background colour of the right column */
border: 1px solid #000;
padding: 0;
background-image: url(images/navbg.gif);/*this is the background colour of the left column */
background-repeat: repeat-y;
background-position: left top;
}
#left {
float:left;
border-right:1px solid #000;
width:199px;
}
#right {
float:left;
width:465px;
border-left:1px solid #000;
margin-left:-1px;/* makes border line up with #left border */
}
Whole simplified page example :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#content {
background-color: #829CC8;/* this is the background colour of the right column */
border: 1px solid #000;
padding: 0;
background-image: url(images/navbg.gif);/*this is the background colour of the left column */
background-repeat: repeat-y;
background-position: left top;
width: 670px;
margin-left: auto;
margin-right: auto;
}
#left {
float:left;
border-right:1px solid #000;
width:199px;
}
#right {
float:left;
width:465px;
border-left:1px solid #000;
margin-left:-1px;/* makes border line up with #left border */
}
</style>
</head>
<body>
<div id="content">
<div id="left">
<p>This is the left content text.</p>
<p>The background colourof this colums is a repeated image along thebackground
y-axis of the container.</p>
<p>The right border of this float is merged with the left border of the right
content to appear as one continuous border.</p>
<p>This is the left content text.</p>
<p>This is the left content text.</p>
<p>This is the left content text.</p>
<p>This is the left content text.</p>
<p>This is the left content text.</p>
</div>
<div id="right">
<p>This is the right content text.</p>
<p>Any column can be the longest and the columns will equalise.</p>
<p>This is the right content text.</p>
<p>This is the right content text.</p>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
(The three column examples use completely different techniques.)
Hope that makes it a bit clearer.
Paul
