Okay, so this seems like it should be really simple -- I've read quite a few posts and tutorials on how this effect can be achieved (I'm making a fixed-width layout and I want borders along either side that extend down the whole page). For some reason, these methods aren't working in my layout. I've tried setting BODY and HTML to {height:100%} as well as #contents (the wrapper DIV I'm using for the whole thing). In a fresh layout, it works fine, but something about my current layout seems to be breaking them.

My goal seems pretty simple (a fixed-width 750px DIV that includes a header, two content sub-columns, and a footer), and I know it's something really basic that I'm missing.

The only thing I can think of is that my layout includes absolutely positioned DIVS within the main, fixed width #contents DIV. Could this be breaking the layout? Here's the relevant CSS:

Code CSS:
#contents 
{
position: relative;
margin-top: 0;
margin-right:auto;
margin-left:auto;
width: 750px;
height: 100%;
padding: 0;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
background-color: #ffffff;
overflow:visible;
}
 
#sidebar
{
position: absolute;
top: 196px;
right: 20px;
width: 223px;
float: right;
display:inline;
}
 
#main_content
{
position: absolute;
top: 188px;
left: 24px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 18px;
width: 469px;
color:#666666;
background-image: url(images/background1.gif);
display: inline;
}

Here's the gist of the HTML:
Code HTML4Strict:
<div id="contents">
	<img id="header" src="images/aha_header.gif" />
	<img id="logo" src="images/aha_logo.gif" />
 
	<div id="main_content">
 
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent et diam. Proin cursus scelerisque eros. Quisque odio. Sed vitae lacus ac mauris porttitor faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> 
 
</div>
 
    <div id="sidebar">
    <div id="side_content"><p>Some test content</p></div>
    <div id="testimonial"><p>"Some more stuff</p></div>
    </div>
    </div>

The way it's set up now, I have borders that are 100% of the height of the current window, but when I scroll down, they don't extend beyond that. Obviously I'm still a CSS beginner, and I want to learn this right. If anybody has any pointers in the right direction, or can tell me what I'm missing or doing wrong, it'd be greatly appreciated. The test site is up at www.ahainc.org/new_site_draft/index.php, if anybody wants to take a look at the full source or see the effect I'm talking about.

Thanks,
Ryan