Child Div not Expanding to Content area?

My container is not stretching to fit

[thhvancouver]

Hi there

I am trying to create a flexible area, in which the container divs will stretch and the background image will repeat to fit the content. Unfortunately, I don't seem to be able to do that.

Here's my css:

@charset "utf-8";
#headerimg {
float: none;
height: 154px;
width: 1024px;
}
#header1 {
float: left;
height: 154px;
width: 660px;
}
#header2 {
float: left;
height: 84px;
width: 364px;
}
#header3 {
float: left;
height: 70px;
width: 364px;
}
#body {
float: none;
width: 1024px;
height: 100%;
}
#foot {
width: 1024px;
}
#leftcont {
float: left;
width: 34px;
background-image: url(../images/leftcont.gif);
height: 100%;
}
#menu {
width: 952px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #414041;
}
#menubuttons {
margin-top: 15px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 10px;
float: left;
}
#subscribe {
float: right;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 20px;
}

#bodycont {
float: left;
width: 952px;
}
#rightcont {
width: 38px;
float: right;
background-image: url(../images/rightcont.gif);
height: 100%;
}

What did I do wrong?

[swa66]

You neglect to state which parent is not expanding. But I suggest you read up on how floats are supposed to not be part of the flow (hence not stretch their non-floated parents), and how a float will collapse around it's content.
There are a number of ways to make a non-floated parent expandaround a floated child, but it won't do it by default.