Column height auto adjust to page height.

[birdwing]

Hey guys I'm working on a website for a client http://www.stevefestmusic.com/

The problem I am running across is those 2 green "side bars" the ones with the symbols.

Right now all 3 columns are set at a fixed height (don't yell at me)



I need to find a way for those 2 side columns to auto adjust to the height of the page.
So that the side bars are always the total length of the page, but the center column should be the size of its content and if it makes the page longer the side bars should adjust.


Get what I'm saying?

ok.. simpler. Side columns need to auto adjust to total height of page. Center column needs to adjust to its content (basically no fixed height).

#leftbar {
	background-color: #1d4b02;
	background-image: url(../images/leftbg.png);
	background-repeat: repeat-y;
	height: 815px;
}
#rightbar {
	background-color: #1d4b02;
	background-image: url(../images/rightbg.png);
	background-repeat: repeat-y;
	height: 815px;
}
#content {
	background-color: #d1b486;
	background-image: url(../images/contentbg.png);
	background-position: top;
	background-repeat: no-repeat;
	background-attachment: scroll;
	height: 500px;
}

leftbar, and rightbar are side columns content is center column.

<div class="container_12">
	<div class="grid_12">
    	<div class="grid_1 alpha" id="leftbar"></div>
        <div class="grid_10" id="main">
        	<div class="grid_10 alpha" id="header"></div>
            <div class="grid_10 alpha" id="content">
           	  <h1>Stevefest III</h1>
                <h2>Backyard Revolution</h2>
                <p><b>February 26, 27, 28, 2010</b><br /><i>Save the dates!</i>                
                <p>                
                <p><br />
                This site is currently under construction, please check back for details on the festival.
          </div> 
        </div>
        <div class="grid_1 omega" id="rightbar"></div>
    </div>
</div>

built with the 960 grid system.


I've tried setting their height to auto, 100% and "*". Nothing seems to work.


help please

[birdwing]

I need #leftbar, #rightbar, and #content to auto adjust to full page height, or to full content of the #content div.

<div class="container_12">
	<div class="grid_12">
    	<div class="grid_1 alpha" id="leftbar"></div>
        <div class="grid_10">
        	<div class="grid_10 alpha" id="header"></div>
            <div class="grid_10 alpha" id="content">
           	  <h1>Stevefest III</h1>
                <h2>Backyard Revolution</h2>
                <p><b>February 26, 27, 28, 2010</b><br /><i>Save the dates!</i>                
                <p>                
                <p><br />
                This site is currently under construction, please check back for details on the festival.
          </div> 
        </div>
        <div class="grid_1 omega" id="rightbar"></div>
    </div>
    <div class="clear"></div>
</div>

here is the CSS im using, which doesn't work:

html, body {
	background-color: #391f09;
	background-image: url(../images/pagebg.png);
	background-repeat: repeat;
	height: 100%;
	margin: 0;
	padding: 0;
}
.container_12 {
	height: 100%;
}
#leftbar {
	background-color: #1d4b02;
	background-image: url(../images/leftbg.png);
	background-repeat: repeat-y;
	height: 100%;
}
#rightbar {
	background-color: #1d4b02;
	background-image: url(../images/rightbg.png);
	background-repeat: repeat-y;
	height: 100%;
}
#content {
	background-color: #d1b486;
	background-image: url(../images/contentbg.png);
	background-position: top;
	background-repeat: no-repeat;
	background-attachment: scroll;
	height: 100%;
}
#header {
	background-color: #d1b486;
	background-image: url(../images/header.png);
	background-position: top;
	background-repeat: no-repeat;
	background-attachment: scroll;
	height: 315px;
}
.clear {
        clear:both;
        display:block;
        overflow:hidden;
        visibility:hidden;
        width:0;
        height:0;
}

any help. I've been at this for days. I've tried everything i can think of.....

I'm using the 960 grid system.