css style gelijke coloms

Hoe komt het dat mijn menu niet zo hoog blijft als mijn content als ik deze opvul?
Hier de css style:
body
{
margin: 0;
padding: 0;
color: #000;
background-color: #DC143C;
}

#container
{
margin: 1em 5%;
background-color: #FFF;
/*background-image: url(background.jpg);*/
background-repeat: repeat-y;
border: 1px solid #333;
}

#logo
{
float: left;
width: 180px;
height: 150px;
background-color: #ffc999;
border-right: 1px solid #000000;
}
#banner
{
height: 150px;
background-color: #ffecaa;
border-bottom: 1px solid #333;
}

#banner h1
{
margin: 0;
padding: 30px;
}

#menu
{
float: left;
width: 180px;
height: 100%;
padding-top: 10px;
/*background-color: #F0E68C;*/
background-image: url(background1.jpg);
background-repeat: repeat: repeat-y;
border-right: 1px solid #333;
}

#menu p
{
margin-top: 0;
}

#content
{
padding-top: 1em;
margin: 0 2em 0 200px;
min-height: 450px;
}

#footer
{
clear: both;
height: 10px;
background-color: #c1eca8;
padding: 1em;
text-align: center;
border-top: 1px solid #333;
}