Noob Background Color Issue

Hey guys, having a bit of a problem with my page im trying to create and the background colors etc.

The html is basically this

<div id="container">
<div id="left">content</div>
<div id="right">content</div>
</div>


and the css is

body{
background:#000
}

#container{
background:#fff
width:720px
height:100%
}

#left{
float:left;
width:200px;
height:100%;
background:#333
border:3px solid #444
}

#right{
float:right;
width:500px;
height:100%;
}



Now thats just a quick copy, theres a lot more to it obviously but thats the principle of it. Now my body background is correct and the container background is correct but the background color of the #left div is not showing up its showing up as the containers color, however the border of the #left div shows up fine.

Any ideas?

Thanks.

I'm no expert, and don't really know CSS at all, but your colors only have 3 characters... like fff.. as far as I've ever known, it needs to be 6.. like ffffff.

Obviously, I could be wrong, maybe CSS uses just 3, idk.

Depends what colors, #fff is sort for #ffffff and #000 is short for #000000 etc.

Here is revised code. Whit background was not showing up in container div because #left and #right divs are being floated, and therefore taken out of document flow. Since there was no content being rendered in #container, the background color wasn't visible. I defined the height with a specific dimension to bypass this issue.

Here is a good site (http://exitfegs.co.uk/Sources.html) that can help you find another solution. I had a link to solve this issue another way, but am unable to dig it up at the moment.


<style type="text/css">

body {
background:#000;
}

#container{
background:#fff;
width:720px;
height:200px;
}

#left{
float:left;
width:200px;
height:100%;
background:#333;
border:3px solid #444;
}

#right{
float:right;
width:500px;
height:100%;
}
</style>

<div id="container">
<div id="left">content</div>
<div id="right">content</div>
</div>

Where I can find information about html for green students?