Faux columns aren't working

The image is displayed, but it won't extend past the <div>

[alephOne]

So I'm trying to faux columns trick from ALA. I have a two-column layout, consisting of a #maincontent <div> and a #sidebar <div>, wrapped within a #container <div>. The sidebar is used, of course, for navigation, whereas the maincontent section is used for - you guessed it - content. That content is, of course, variable in page height from page to page. The idea behind the faux columns trick is to have columns of equal height, no matter how much page height a particular column has. As far as I know, the CSS is correct in the #sidebar <div> to allow for this to happen. The image is there, and I'm able to browse to it. The problem is that the sidebar background doesn't extend below the <div>, if that makes sense. It's "short". The only thing that I can think of offhand that might be causing it is that I've set the #maincontent <div> to float: left. Is that it, or is there something else going on?

A side note is that the sidebar column sits to the right and below of the maincontent column in IE6/Win, which is something that I haven't been able to figure out how to fix. Is this related, perhaps?

CSS rules below:

#maincontent {
background: #fff;
float: left;
text-align: justify;
margin: 0em;
padding: 15px;
width: 430px; /* box model hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 400px;
}

#sidebar {
background: rgb(210,220,230) url(http://www.webmasterworld.com/images/sidebar.jpg) repeat-y;
padding: 2px 10px 10px 0;
margin: 0 0 0 430px;
height: 100%;
border-left: 1px dotted #555;
}

[bedlam]

Hi,

It's hard to say for sure without seeing your markup, but have you misunderstood how the faux column works? The background has to be on the element that contains the column, not the column itself.

The fact that the <div> does not extend to the bottom of the container is the actual problem; simply adding a background image to the same element can't solve it. The idea of the 'faux' column is that putting a repeated image 'behind' the too-short column, creates the illusion of a full-height column.

-B

[alephOne]

You were absolutely correct; I didn't understand the idea behind the faux columns. I created a two-column background and applied it to the container <div>, and it works fine now. Thank you for your help! :D