Wrapper Issue

HTML & CSS
1

Hi,

I’m trying to put a simple white box around my main content on the development site http://www.clhdesigns.com/maynard

For some reason the white is not showing up in my main content area.

Here is the CSS code in Question

#body_wrapper{
	background:url(../images/body-bg3.png) repeat-x #ffffff;
	width:960px;
}
		
#content {
	float:left;
	padding:20px;
	width:590px;
	color:#000000;
}

#content ul {
	margin: 20px 0;
	padding: 0;
	list-style-type: disc;
}

#content li {
	font-size:1.3em;
	margin:20px;
}

#right {
	float:left;
	width:290px;
	padding:20px;
	color:#fff;
}

#right1 {
	background:url(../images/right1.gif) repeat scroll 0 0 transparent;
	height:188px;
	margin-top:10px;
	padding:25px 20px;
	width:245px;
}
#right1 p {
	color:#646464;
	font-size:14px;
	line-height:18px;
}
#right1 a {
	color:#11779F;
}
#right1 span {
	color:#000000;
}
#right1 h2 {
	font-size:18px;
	line-height:22px;
	margin-bottom:15px;
	text-transform:uppercase;
}
#right2 {
	background:url(../images/right2.gif);
	height:256px;
	margin-top:30px;
	padding-left:30px;
	padding-right:30px;
	padding-top:30px;
	width:225px;
}
#right2 p {
	color:#fff;
	font-family:"Trebuchet MS";
	font-size:16px;
	line-height:27px;
	margin:0px;
	text-align:center;
}

#author {
	height:34px;
	margin-left:30px;
	margin-top:28px;
	padding-left:6px;
	padding-top:6px;
	width:219px;
}
#author h3 {
	font-family:"Trebuchet MS";
	color:#000;
	font-size:13px;
	font-style:italic;
	font-weight:bold;
	line-height:6px;
}
#author p {
	color:#646464;
	font-size:13px;
	line-height:18px;
	margin:0;
}

you can see the end result with the html page that the content area is still grey.

Any ideas is it something silly I’m missing?

2

You need to contain floated elements in it, by using an overflow value other than the default one: visible. Usually auto or hidden.

Since

  • all elements inside div id=“body_wrapper” are floats
  • floats are taken out of the normal floats

you div id=“body_wrapper” has a very small height, undetectable, but it has a white background, nonetheless.

By using overflow:auto or overflow:hidden on div id=“body_wrapper”, it will extend its height to wrap around floated elements inside it, thus making the white background detectable.

3

Yes sir that did the trick!
Thanks a bunch.

4

You’re welcome :slight_smile: