2-Column layout height and BG help

[codeparrot]

I have a simple 2-column layout where the left-column is a menu and the right-column is the main content. These columns are both placed within a main content "wrapper". The wrapper has a repeating background that displays behind both columns. My problem is that my wrapper BG is "ending" where the left-column stops, instead of continuing to follow the right-column content. My left-column will always be 875px tall and my right-column can be as tall as 1900px on some pages. I think the problem is happening because most of my content is being called from .php files instead of in the HTML. Is there anyway to get the DIVs to recognize the true height of all the content being imported from the .php file?

Thanks in advance!



#main-content {
width: 956px;
min-height: 2000px; /* Set this high to ensure BG reaches the end */
background: #FEF8EC url(images/main-content-bg.jpg) 0 0 repeat-y;
}

.left-column {
width: 178px;
float: left;
}

.right-column {
width:778px;
float:right;
}

.right-column-inner {
padding: 0px 15px 0px 15px;
}




<div id="main-content">
<div class="left-column">
<?php include("main-menu.php"); ?>
<div class="locations">
<?php include("locations.php"); ?>
</div>
</div>
<div class="main-content-top"></div>
<div class="right-column">
<div class="right-column-inner">
<?php include("main-content-inner.php"); ?>
</div>
</div>
</div>

[codeparrot]

Everything displays properly with the following edit:



#main-content {
width: 956px;
overflow:hidden;
background: #FEF8EC url(images/main-content-bg.jpg) 0 0 repeat-y;
}


I found out that parent elements are never to expand to contain floated elements.