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 id=“globalNav”>
</div>
<div id=“contentL”>
</div>
<div id=“contentC”>
</div>
<div id=“foot”>
</div>
</div> <!-- closes container tag –>
</body>
</html>
Any recommendations would be great. I’m trying to create a tabless design.
Thanks
M66