simple fix of CSS 2-column layout

[rndilger]

1) Project Details: I'm having trouble getting a 2-column CSS layout to work properly. Essentially, I can't get both the sidebar and main columns to stretch to the bottom of the page. You can see my "challenge" at: http://www.622cards.com.

This is a template being built for a Joomla site and all I need is to get the CSS layout working properly. There are 2 pages, Home and Test page, which highlight the lack of vertical stretch of the sidebar and main content columns, respectively. In the end, I want to have a compliant layout that will work in all browsers.

Simple fix, but plenty of frustration on my part. Thanks in advance!

2) Payment Amount: $15

3) Payment method: Paypal

[_Aerospace_Eng_]

Upload the attached image to your server where all of your other images are. Name it contentbg.png

And change this
#content_container {
width: 777px;
clear:both;
}
to this
#content_container {
width: 777px;
background:url(../images/contentbg.png) repeat-y;
}
Remove any background images and heights from your sidebar and main divs. The relevant CSS should now look like this

#content_container {
width: 777px;
background:url(../images/contentbg.png);
}

#sidebar {
text-align:left;
width: 258px;
float:left;
}

#main {
width: 499px;
float:right;
padding-right:20px;
}