Two column - div doesn't show bg graphic

Please take a look at the code and page link below.
I am trying to get two columns, one with a different color from the other like you see on the page link. I thought putting the content-main and the content-nav divs in the abc div would nest them so I could apply a background image/color to that div.
Why isn’t it working the way I thought it would, what am I missing? (I know the css should be separate, but for this demonstration I’ve put it all in the same file.) What should be changed? And more importantly looking at the overall page, what would be more effective?
thanks so much

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>trial 01</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
}	
#wrapper {
	background-image: url(images/gold-diagonal.jpg);
	background-repeat: repeat-x;
	height: 200px;	
}
#content-wrapper {
	margin: 0 auto;
	padding: 0;
	width: 925px;
}
#logo-bg {
	padding-top: 120px;	
	margin: 0;
}
#logo-bar {
	margin: 0 0 -10px 0;
	padding: 0 0 -10px 0;	
}
#header-text {
	background-color: #000084;
	color: #fff;
	font-size: 140%;
	padding-left: 20px;
	margin: 0;
	padding: 30px 0 30px 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
#content-main {
	width: 550px;	
	float: left;
}
#content-nav {
	width: 321px;
	float: right;
	background-color: #fcf3cc;
}
#abc {
	background-image: url(images/background-pattern.jpg);
	width: 925px;
	background-color: green;
}
#clear-content {
	clear: both;	
}
#footer {
	border-bottom: 7px solid #bfa14e;	
}
	/************* FORMATTING *****************/
p {
	padding: 0 10px;
	margin: 0 10px;	
	}
</style>
</head>
<body>
	<div id="wrapper">
		<div id="content-wrapper">
			<div id="logo-bg">
				<img id="logo-bar" src="images/logo-bar.jpg" alt="" />
				<div id="header-text">trial 01</div>
			</div>
			<div id="abc">
				<div id="content-main">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras libero dui, semper quis ornare a, rutrum at lectus. Quisque convallis consequat odio ut pellentesque. Etiam at ipsum felis. Vivamus consequat odio nec dolor ornare tincidunt. Nunc scelerisque rutrum felis vitae malesuada. Praesent pulvinar feugiat eros. Proin imperdiet rutrum congue. </p>
					<p><img src="images/sample.jpg" border="1" width="300" height="214" alt="sample" /></p>
					<p>Nunc euismod auctor enim, at faucibus nulla euismod vitae. Sed gravida rutrum consectetur. Praesent tincidunt, nibh et scelerisque vehicula, nulla magna congue erat, ut laoreet nunc sem in risus. Donec sagittis, mi vitae pharetra condimentum, purus urna viverra Aliquam in risus orci, in auctor nisl. Fusce vestibulum urna ut est aliquet consequat. Proin mollis neque quis ante laoreet rutrum adipiscing urna vulputate. Pellentesque et dolor eget ligula iaculis tincidunt quis varius sapien. Sed adipiscing dui ac nulla iaculis tempus volutpat justo auctor. Integer vulputate pretium mauris. Donec vestibulum erat sit amet sapien posuere laoreet. </p>
				</div>
				<div id="content-nav">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras libero dui, semper quis ornare a, rutrum at lectus. Quisque convallis  mauris. Donec vestibulum erat sit amet sapien posuere laoreet. </p>
				</div>
			</div>
			
			</div>
		</div>
	<div id="clear-content"></div>
	<div id="footer">
	</div>
</body>
</html>

http://mmnkltd.com/trial01/trial01.html

The abc div collapses because the content-main and content-nav divs are both floated.
Why don’t you apply the background image to the content-main div?

hi,
thanks for the response.
When I give your suggestion a try, the background-image doesn’t stretch all the way across the page like it does in the picture.
other thoughts on this part?

thanks

what picture?

sorry, on the linked page it shows what I’d like it to look like

Another option would be to put overflow:auto; on the parent div - this ‘contains’ the floats, ie, it tells that div to enclose any of its children that are floated.

Why not use the image in the body tag?

Hi,
adding the “overflow: auto” did work. The footer, the thin lime-colored line (just for now), now ends up towards the top. I thought the footer would be well out of the flow and have to be down at the bottom. I’d like a sticky footer but am thinking that is a couple of steps away.
About not putting the graphic in the body tag, I thought it was “best practice” not to have an image in there.

any more thoughts?

this is key to my design
thanks