Content background color

HTML & CSS
1

I’m trying to apply a background color to the content block of a page, but it is not working. I’ve included the CSS and HTML below. Any thoughts why?


body
{
	background-color: #ffffd1;
	font-family: arial, helvetica, sans-serif;
	font-size: 10pt;
	color: #576729;
}
#wrapper
{
	width: 700px;
	margin: 0 auto;
	padding: 0;
	border: none;
}
#container1
{
	background-color: #bdc79a;
	width: 640px;
	margin: 0 auto;
	padding: 0;
	border: none;
}
#content_left
{
	font-weight: bold;
	width: auto;
	padding: 5px;
	float: left;
}
.text_center
{
	text-align: center;
}



<div id="wrapper">
	<div id="container1">
		<div id="content_left" class="text_center">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec a libero aliquet lorem sodales ornare. Cras sed accumsan neque.
Vestibulum varius rhoncus turpis, vitae lacinia arcu rutrum ac. Vivamus sed
massa non nunc dapibus vehicula ut sit amet urna.</p>
		</div>
	</div>
</div>
2

Thanks Stevie D!

Just starting to learn and trying to use CSS rather than tables in my designs, which is proving to be a little challenging.

3

The only content of #containerl is floated. That means it is taken out of the document flow when laying out the elements. So, in terms of layout, #containerl has no content, and empty elements have no height.

The two easy ways round this are:

  1. Float #containerl
  2. Put overflow:hidden; on #containerl

Either of these methods will “enclose the float”, so that #containerl will expand to go around (enclose) the whole of #content_left, and you’ll see the background colour.