I am trying to build a website that has three floating columns in the middle of the page. I have a container wrapping around everthing but it will not extend fully. Is there something I am doing wrong?

Thanks

```
 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
       <link rel="stylesheet" type="text/css" href="style/style.css">
 </head>
 <body>
     <div id="container">
         <div id="header">
             <div id="navbar"></div>
         </div>
         <div id="topper">This is the Topper</div>
         <div id="colone">This is column one</div>
         <div id="coltwo">This is column two</div>
         <div id="colthree">This is colum three</div>
         <div id="footer">This is the footer</div>
     </div>
 </body>
 </html>

 @charset "utf-8";
/* CSS Document */
#container
{
    background-color:#CCC;
    min-height:100%;
}
#header
{
    background-color: #000;
    width:100%;
    float:left;
}
#navbar
{
    background-color: #FFF;
    border-radius: 10px;
    height:75px;
    width:70%;
    margin: 0 auto;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px;
}
#topper
{
    background-color:#000;
    height: 175px;
}
#colone
{
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#coltwo
{
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#colthree
{
    background-color:#FFF;
    float:left;
    margin-left: 15px;
    margin-top:-20px;
    height:150px;
}

#footer
{
}

```