CSS Positioning Question

I have a site with a top section and main section within a container. The top section has a banner within it. In my main section, I have a background that consists of a horizontal white bar with a stripe on each side, thus creating a border. I have 15 px of padding on left and right. I would like to add a bottom section that connects up with the main section, creating the bottom border. I know how to do this with absolute positioning and a set height in my main section, but I dislike this method since this restricts the amount of content. If I place a div within my main section, it obeys the 15 px padding and does not extend to the right and left edges. Is there a way to position a bottom section that contains my bottom border so it connects up with the main section background? A picture to help explain what I am trying to do is shown here:

Thanks for any help you can provide.

#Container {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 730px;
	
	}

#top {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 730px;
	margin: 0px 0px 0px 0px;
	height: 75px;
	padding: 0px 0px 0px 0px;
	background-image: url(images/banner.png);
	} 

#maincontent {
	position: absolute;
	top: 75px;
	left: 0px;
	width: 700px;
	padding: 0px 15px 0px 15px;
	
	margin: 0px 0px 0px 0px;
	background-image: url(images/background.PNG);
	}

HTML:

 

Easiest way to do it would to be to put a div after the content section with padding/margin/everything at 0. And make sure the bottom margin on the content div is 0 and let it ride up under it. Have to give it height, width, set the left/right margin to auto.

 

Thanks! How should I position this?

 

Just put it as relative with margin:0 auto; padding:0 and the image as the background. Set the width to the img size etc.

 

I got it to work! I placed the bottom div within the main content div at the bottom with CSS

#bottom {
	width: 730px;
	height: 21px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	background-image: url(images/bottomline.PNG);
	position:relative;
    left:-15px;
	}

HTML:

The relative positioning shoved it over to the far left and the image extended to the far right.

 

cool. it should work no matter how much content you put in there now.

 

Thanks for the help! Hope this thread can help others as well.