CSS Wrapper and BG Colour

I was trying to use a wrapper type css div to make a page 1000px wide with inside it other divs that remain with its formatting.

The divs I want are:

wrapper: 1000px wide
header: 1000px wide and 50px high

menu: 200px wide
table: 800px wide

The problem I have is the background on the menu, and the table doesnt follow the same colour as the wrapper.
On the left side of the page, the white background ends where the menu div ends, then below it it goes back to the body colour

Here is an image of the problem: http://i35.tinypic.com/6zrbxx.png

any idea why?


@charset "utf-8";
/* CSS Document */

html {
/*background-color:#CAFF70;*/
font-family:Arial, Helvetica, sans-serif;
}

body {
/*text-align:center;*/
/*padding: 0 10px 0 10px;*/
background-color:#CAFF70;
font-family: Gill Sans MT, Verdana, Arial;
/*width: 1000px;*/
margin: 0 auto;
}

#wrapper {
width: 1000px;
background-color:#FFFFFF;
margin: 0 auto;
}

#header {
width: 1000px;
height: 50px;
}

#menu {
width: 200px;
float:left;
}

#booktable {
width: 800px;
float: right;
}

table {
/*margin: 0 auto;*/
width: 800px;
float:right;
/*background-color:#FFFFFF;*/
border-collapse: collapse;
text-align: left;
font-size:12px;
}

table tr.colour1 {
background: #E0EEEE;
}
table tr.colour2 {
background: #C1CDCD;
}
table tr td {
padding: 0 5px;
}
table tr td.cen {
text-align:center;
}



<div id="wrapper">
<div id="header">
<h2 align="center">Resetting the Database</h2>

</div>

<div id="menu">
hi
</div>

<div id="booktable">
<table>
<tr>
<th scope="col">#</th>

<th scope="col">Creator</th>
<th scope="col">Title</th>
<th scope="col">ISBN</th>
<th scope="col">Price</th>
<th scope="col">Genre</th>
</tr>

<tr class=colour1>
<td>1</td>
<td></td>
<td>"Doctor Who" Annual 2006</td>
<td class="cen">1904419739</td>
<td class="cen">36.99</td>
<td>Doctor Who Comics & Graphic Novels Annuals</td>

</tr>
</table>
</div>
</div>


Here is an image of the problem: http://i35.tinypic.com/6zrbxx.png

Need to clear your floats.

adding something to clear them at the bottom, inside your #wrapper.
e.g. <div style="clear:both"></div>

Also you have <tr class=colour1>, should be <tr class="colour1">

Also in future it's easier to just post a link to a live copy :)

wow that was simple. I didnt know that.

and thanks about the colour, will fix that error.

Yeah, might be useful to read up on floats: http://codingforums.com/showthread.php?p=617640#post617640

Remember to click thanks if you found this help :D

useful link thanks

i never really learnt css, just messed about with it