Background-image and Background-color issues

**M66** · Sep 15, 2010 09:26

Hi

I am trying to create a tableless layout with CSS and I have a problem. Here is my CSS

body
{
margin: 0px;
padding: 0;
font-family: 'Calibri', Arial, San-Serif;
font-size: small;
background-color:#ffffff;
color:#444;
background: fixed;
background-image:url(pix/bkgrdgrayfade.gif);
background-repeat: repeat-x;
}

#container
{
width:950px;
margin:10px auto;
background-color:#FFFFFF;
}

#globalNav
{
padding: 0;
margin: 0;
background-color:#000000;
color: #cccccc;
}

#contentL
{
margin:0em 0em 0em 0em;
padding:0em 0em 0em 0em;
width:153px;
float:left;
background-color:#FFFFFF;
height:1200px
}

#contentC
{
margin:0em 0em 0em 0em;
padding: 0em 0em 0em 0em;
float:right;
width:790px;
border-left:thin gray solid;
background-color:#FFFFFF;
}

#foot
{
float:right;
}

contentL, contentC, globalNav and foot are nested within container and container is nested within body.

I'm trying to set the background-color of the container element to white so that even though the heights of contentL and contentC are different, there will still be a uniform white background.

For some reason it is not working. columnL is shorter than columnC (as expected). As a result, the image that I've assigned to the body tag appears at the bottom of columnL and goes to the bottom of the page. I would like it to be only white. This happens even though both columnL and columnC are nested withing container and container's background-color is set to white.

Here is (generally) my DIV and HTML tag structure in the page

<html>
<body>
<div id="container">

</div>

</div>

</div>

</div>

</div> 
</body>
</html>

Any recommendations would be great. I'm trying to create a tabless design.

Thanks
M66