Image Border Blog (Fixed Width)

I created a set of Div tags and css to set my blog to a set width and surround it with an image border. I can get everything to work out fine, except for one thing… height of the page.

Main Page Example (looks fine):
http://www.pcxdesigns.com/dev/ipb3-wp/blog/

What it looks like when its messed up:
http://www.pcxdesigns.com/dev/ipb3-wp/blog/?p=8

My CSS:

#border_container {
	width:980px;
	min-width: 600px; /*this ccould be set to a solid width by pixels if you know what that is */
	margin: 10px auto;
	}

	#border_header {
		margin: 0px auto;
		width: 100%;
		height: 48px;
		}

		#border_headerLeft {
			background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_topleft.png) no-repeat scroll left center;
			width: 40px;
			height: 48px;
			padding: 0px;
			margin: 0px;
			float: left;
			}

		#border_headMain{
			/*if you have any thing to style in the header it could go here*/
			background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_topmiddle.png) repeat-x scroll 0 0;
			height: 48px;
			width: 900px;
			float: left;
			}

		#border_headerRight {
			background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_topright.png) no-repeat scroll left center;
			width: 40px;
			height: 48px;
			padding: 0px;
			margin: 0px;
			float: right;
			}

	#border_content {
		margin: 0px auto;
		}

		#border_leftBorder {
			background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_mleft.png) repeat-y scroll 0 0;
			width: 40px;
			height: 900px;
			float: left;
			}

		#border_contMain {
			height: 900px;
			width: 600px;
			width: inherit;
			float: left;
			}

		#border_rightBorder {
			background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_mright.png) repeat-y scroll 0 0;
			width: 40px;
			height: 900px;
			float: right;
			}

	#border_footer {
		margin: 0px auto;
		height: 48px;
		}

		#border_footerLeft {
			background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_bottomleft.png) no-repeat scroll left center;
			width: 40px;
			height: 48px;
			padding: 0px;
			margin: 0px;
			float: left;
			}

		#border_footerMain{
			/*if you have any thing to style in the header it could go here*/
			background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_bottommiddle.png) repeat-x scroll 0 0;
			height: 48px;
			width: 900px;
			float: left;
			}

		#border_footerRight {
			background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_bottomright.png) no-repeat scroll left center;
			width: 40px;
			height: 48px;
			padding: 0px;
			margin: 0px;
			float: right;
			}

The only way I could get the main page to fit was to put a height and set it for 900px for: border_leftBorder, border_contMain and border_rightBorder. I tried auto max-height 100% and just removing it. But if I remove the height then the side columns vanish completely.

header.php:

<div id="border_container">
    	<div id="border_header">
            <div id="border_headerLeft">       </div>
            <div id="border_headMain">      </div>
            <div id="border_headerRight">      </div>
        </div>
		<div id="border_content">
        	<div id="border_leftBorder">     </div>
            <div id="border_contMain">

footer.php

</div>
        	<div id="border_rightBorder">   </div>
        </div>
        <div id="border_footer">
            <div id="border_footerLeft">      </div>
            <div id="border_footerMain">      </div>

            <div id="border_footerRight">     </div>
        </div>
    </div>

Any suggestions to get it to work properly, without a set height?