CSS not allowing div to expand?

Hey,
I've been working on my site and for some reason I can't get my content image to expand with the content.

To view the site, click here (http://ericaftw.com/cute).

Here's my stylesheet:

body {
background-image: url('images/background.jpg');
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7.5pt;
}

#container {
margin-left: auto;
margin-right: auto;
height: 100%;
}

#header {
height: 106px;
background-color: #ABE7EE;
border-bottom: solid #C2C2C2 10px;
}

#navUp {
height: 106px;
}

#navOver {
height: 106px;
visibility: hidden;
}

#content {
width:1024px;
background-image: url('images/content.gif');
height: 100%;
min-height: 655px;
}

#wrap {
background: transparent;
width: 812px;
height: 100%;
padding-top: 10px;
}

#main {
float: left;
width: 555px;
height: 100%;
text-align: center;
padding-left: 5px;
padding-right: 8px;
}

#right {
position: relative;
margin-left: 580px;
width: 240px;
height: 100%;
text-align: center;
}

#welcome {
width: 400px;
border-top: 5px solid #696060;
background-color: #A49A9A;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 5px;
}

Thanks!

try changing your content attributes to the following


#content {
width:1024px;
background-image: url('images/content.gif') repeat-y;
min-height: 655px;
}


Cause it looks good in Google Chrome and IE7 but in FF it looks messed up so hopefully this will fix it.

Hello EricaL,
Try this bit in red -#content {
width:1024px;
background-image: url('images/content.gif');
height: 100%;
min-height: 655px;
overflow: auto;
}

Read about using overflow:auto; to clear floats here - http://www.quirksmode.org/css/clearing.html


...

I tried what you suggested and in Firefox, the image doesn't show up at all for some reason.

I also tried setting:
background-repeat: repeat-y;
but that didn't work either.

EDIT: Thanks Excavator! It worked perfectly. :)

I just noticed what size your background image is. Pitbull is partially right. It will need repeated on the y axis but his method may not work in most browsers.
Make your CSS for #content look like this instead -
#content {
width:1024px;
background: url('images/content.gif') repeat-y;
height: 100%;
min-height: 655px;
overflow: auto;
}

Excavator's solution is the correct one because elements are never to expand to contain floated elements. This is an IE bug. His solution makes more modern browsers imitate IEs bug.