Make background container grow with either div column

I have a website with two main div columns - a sidebar & a main content area. Behind them I have a background that needs to grow if either column grows. As you can see here http://ariettalaw.techbots.info/html/chapter7.php the right column extends past the main_body container. How do I make the main_body stretch if either sub_content or left_sidebar grows? Here  is the home page with the left_sidebar longer so you can see what the background image is supposed to look like. I want 70px of the background image to show below the sub_content.

Here are the three elements:
#main_body {
	width:1000px;	
	margin: 0 auto;
	background: url(/images/main_body_bg.jpg) no-repeat left bottom;	
	background-color:#466A93;
	overflow: hidden;
}

#sub_content {
	float:right;
	position: fixed;
	margin-left:319px;
	margin-top:0;
	padding:5px 40px 60px 45px ;
	width:596px;
	background: #FFFFFF url(/images/home_main_content_bottom.jpg) no-repeat left bottom;	
	margin-bottom:70px;
}

#left_sidebar {	
	width:319px;
	float:left;
	margin:0;
}

Open in new window

LVL 1
techbotsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HagayMandelCommented:
There are several ways to achieve this:
Here is the CSS way.
And here is the JavaScript way.
These are just samples; Google more for "equal height"
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
techbotsAuthor Commented:
Unfortunately neither option worked. I added a float to the main_body as the CSS way suggested. That should have done it but it didn't.

The Javascript way is not what I need - I don't need the columns to be the same height, I need the main container background to match the tallest column height.
0
techbotsAuthor Commented:
Actually the CSS way posted above does work. After adding the float to the main_body, I realized that it was the "position:absolute;" on the sub_content that was causing the problem. Removing that made the background height work.

I am giving a "C" for the response because it was an incomplete answer and the advice to Google "equal height" was not helpful! I came here after already Googling for hours.

(Now I have another issue that I will post in a separate question.)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.