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">