Question

I have a container containing one float left and one float right div.

I want to position a footer on the right side div on the floor. Both left and right divs need to expand relative to the tallest div and the footer should stay on the bottom of the right side div at all times.

How can I achieve this? Can someone please provide me an example or point me to tutorial?

EDIT:

---

OK, sorry for my terrible pic but I think you get the idea. Also, if the left div grows taller than the right, the right div should grow with the left and vise versa. If the content on the right grows, it should not overflow onto the footer.

---

EDIT

This is a screenshot of the latest attempt by jackthetipper. The footer is not yet on the bottom of the right side div even though content has been added to the left.

Answer 1

Live demo. I believe this is what you are looking for:

HTML

<div id="wrapper">
    <div id="left">Left</div>
    <div id="right">Right</div>
    <div id="rightfooter">Text</div>
</div>
​

CSS

#wrapper {
    width: 300px;
    height: 200px;
}
#left{
    background-color: #82ff68;
    float: left;
    width: 50%;
    height: 100%;
}
#right{
    background-color: #ff5c4a;
    float: left;
    width: 50%;
    height: 100%;
}
#rightfooter {
    height: 1em;
    width: 50%;
    background-color: blue;
    float: right;
}​

EDIT after comments

Demo with footer in the div

EDIT 2 after comments

Second demo with expanding heights (dependant on each other)