Synching background image with auto content height

So im having an issue with some divs that prefer only to have a set height rather than an auto or percentage.

Basically I have some content that changes the overall height of the container in the Main Content frame. The left and right border divs when height=auto, basically disappear and alter throw the positioning off.

If i'm defining a background image in divs on either side of a main content frame, can i get the border divs to grow or shorten when the main content frame height is changed by the content in there?

It just seems to my amateur mind that if the heights were set to "auto" any frame would be able to define the height of the page and the other would grow along with it. Maybe I'm just missing something.

I have included the divs in question below.

#frame {
width: 848px;
height: auto;
background-color: white;
margin: 0pt auto;
position:relative;
}



#left_border {
width: 24px;
height: auto;
background-image: url(images/left_border.jpg);
background-repeat: repeat-y;
float:left;
}

#main_content {
width: 800px;
height: auto;
background-image:url(images/bottom_bg.jpg);
background-position: bottom;
background-repeat: no-repeat;
float:left;
}

#right_border {
width: 24px;
height: auto;
background-image: url(images/right_border.jpg);
background-repeat: repeat-y;
float: left;
}

You need to clear your floats however height:auto; doesn't work the way you think it does. To make the columns appear like they are the same height as #main_content you will need to use the faux columns (http://www.alistapart.com/articles/fauxcolumns) technique.

For clearing your floats read this http://www.positioniseverything.net/easyclearing.html