I have a page with three columns inside a container. All three colums should be white whilst the body of the page is red. It renders fine in IE but not in firefox or safari.
The webpage is here: My Webpage
Any ideas please? The css code is:

body {
background-color:red;
margin:0;
padding:0;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}
#container {
width:800px;
height:auto;
background-position:top left;
margin:0 auto 0 auto;
position:relative;
background-color:#FFFFFF;
text-align:left;
padding:0px 0 0 0;
}
p {
color:black;
font-size:14px;
line-height:14px;
}
#leftCol {
float:left;
width:150px;
height:320px;
}
#midCol {
float:left;
width:500px;
height:320px;
}
#rightCol {
float:left;
width:150px;
height:320px;
}





Thanks
John

From the code you posted it looks like you haven't cleared the floats. Floats don't take up any space so they won't expand the box they are in if you don't make that happen.
http://css-discuss.incutio.com/?page=ClearingSpace

thanks for that