CSS: two columns with footer at bottom of right column

Having issues getting this to work

[faltered]

Here is what I'm trying to do (and have done so far):

I have a header followed by a horizontal nav. Then below that I have a left sidebar and a content area that is floated right. I want my footer to come at the bottom of the content area, NOT at the bottom of the sidebar/content area. Follow me so far?

Here's a horrible rendition:

***header***
****nav*****
@@//////////
@@//////////
l@//////////
e@//content/
f@//////////
t@//////////
@@//////////
@@--footer--

I have everything set up fine. My problem is this- I can't get the footer to come at the bottom of the content area when the leftsidebar is longer than the content. In other words, I want my content area to expand almost all the way to the end of the sidebar, but leave enough space for the footer to fit in.

I have been unable to achieve this so far.

Also, I want the leftsidebar's background color to expand all the way to the bottom when the content area is longer than the sidebar.

I have searched high and low for solutions but nothing has worked so far. I tried using a relatively positioned container for the content and footer and then absolutely positioning the content and footer within that container. But that only takes them all out of flow.

I thought perhaps another set of eyes would be able to pick up what I'm doing wrong.

Thanks all.

*****************
relevant xhtml:
********
<div id="bigcontainer">
<div id="header">&nbsp;</div>
<div id="nav">nav goes here</div>
<div id="content">
<h1>Welcome</h1>
<p>Content goes here.</p>
<p>And here.</p>
<p>And here still.</p>
</div>
<div id="leftsidebar">
<p>Sidebar content here</p>
<p>And here.</p>
<br/>
<br/>
</div>
<div id="footer">
<p>&copy; 2003-2006 All rights reserved.
</div>
</div>
******************
Relevant CSS
************
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}

#bigcontainer {
margin: 10px 0px -10px -390px;
padding: 0px;
position: absolute;
left: 50%;
width: 780px;
border: 1px solid #000000;
}

#header {
margin: 0px;
padding: 0px;
height: 190px;
width: 780px;
background-image: url(images/fsibanner.jpg);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
#content {
margin: 0px;
padding: 40px 40px 20px 35px;
width: 481px;
height: 90%;
font-family: Arial, Helvetica, sans-serif;
font-size: .68em;
color: #000000;
line-height: 1.75em;
float: right;
}
#leftsidebar {
margin: 0px;
padding: 22px 13px 10px 28px;
float: left;
width: 169px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: .68em;
color: #000000;
line-height: 1.5em;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
background: #CCCCCC;
}
#footer {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: .64em;
color: #000000;
width: 556px;
float: right;
}
.clear {
clear: both;
}

[faltered]

Anybody able to help? Did I not explain my problem clearly enough?

[Fotiman]

Did you try this?

#footer {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: .64em;
color: #000000;
width: 556px;
float: right;
clear: both;
}

[Fotiman]

Actually, I don't think that's what you want either.

What about this:
Instead of floating your content and footer right, only float the sidebar left?

[SuzyUK]

or make your footer into the float clearing div,

As you have both your left and right sides floating you just need to make it wide enough to ensure it clears either one of them no matter which is the longest.. so make it 100% wide to fill the container that way it will always "drop down" below the longest floated column and then just pad the content of the footer to match where you would like it's left position to make it appear as if it's just below the right column.

#footer {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: .64em;
color: #000000;
/*
width: 556px;
float: right;
*/
border-top: 1px solid #f00; /* just for visual */
width: 100%;
}

#footer p {padding-left: 200px;} /* or whatever suits */

>>get the columns to "stretch" their background color ~
well you can do this a couple of ways, but one important thing to remember is that a float has no way of knowing what height it's parent or sibling is because it's removed from the flow.. so if you know which column's always going to be the longest then you can apply the colours directly (one to the container and one to the longest float), ~ but when you don't what column is going to be the longest the best way I can think of is to use a background image on the container div, try a search for "Faux Column Technique"

Suzy

[faltered]

Hmmmm so I guess the answer is that it really can't be done. That stinks.

I decided to change the sidebar so that it doesn't have a background color or border. That will solve the problem of the color expanding to the bottom of the container. And I took Suzy's suggestion with the footer.

Thank you all.

Any idea if these will be do-able in the future?