Div not extending with content

[Allyria]

I cannot get one of my divs to expand vertically with content, the content just overflows.

My layout has a left-floated sidebar div and a right-floated content div, followed by a footer. The content div expands downwards perfectly when there is a lot of text inside it. However if the content div has less text/images than the sidebar div, the footer starts at the end of the content div, causing the text/images of the sidebar to overflow.

This can be seen on the page here:
http://victoriacooper.co.uk/draft2/link2.html

The other pages just have filler text, but if you click around you'll see how it's supposed to look.

I've tried setting the min-height of the sidebar, tried going through overflow options and browed the forums but to no avail.

Any help would be appreciated.

Thanks, Ally

[boogyman]

if you are using floats to place the main content and side bar add the following css style to your "footer" section



div#footer {
clear:both;
}

[Allyria]

I've tried that too, I'll include the relevant code, hopefully it'll make answering easier :)



#sidebar {
width: 150px;
float: left;
margin: 5px 0px 10px 10px;
padding-top: 50px;
text-align: center;
}
#content {
width: 700px;
float: right;
margin: 5px 15px 10px 0px;
padding-top: 20px;
padding-bottom: 20px;
background-image: url(images/watermark.bmp);
background-repeat: no-repeat;
background-position: center;
}
#footer {
clear: both;
width: 880px;
margin: 0px;
padding: 10px;
text-align: center;
border-top: 1px dotted #cccccc;


And here's how it's used in HTML:



<div id="sidebar">
<p>Sidebar Stuff Here</p>
</div>
<div id="content">
<p>
Content Here
</p>
<div id="footer">