Simple Problem with Borders

This seems to be a simple problem. But I can’t fix it. The situation:

I need a main container (labeled as “content”) that has a 1×900 pixel background that is repeated in the y direction — creating a border to the left and right of the page. Inside this main container is both a header and a lower container where the blog posts are displayed.

The problem is that when the lower container is either positioned via a position: float or a position:absolute, then the background of the larger container refuses to extend down (it only surrounds the header section)

Here is a bit of the index file

<div id=”rap”>
<?php get_header(); ?>
<div id=”content”>
// Generate the posts here
</div>
</div>

Now, the header stuff is floated at the top of the page. There is no problem. However,

#rap
{
background:#000 url(‘img/repeatbar.gif’) center repeat-y;
width:900px;
margin:0 auto;
padding:0px 3px;
}

#content {
position:absolute;
top: 194px;
}

So when the stuff in the #content is commented out, then the border/background extends downwards.

Can someone suggest a solution/answer? Why is this happening? If you need any elaboration, let me know.