css, float, 2 Spalten

[schnalbi]

Hallo
Ich habe ein 2 Spalten-layout mit Kopf und Fussbereich.

In der linken Spalte ist die Navigation.

Im Contentbereich möchte ich nun eine kleine Toolbox einfügen, doch die wird immer auf die Höhe der Navigation vergrössert.

<div id="container">  
  <div id="kopf_left"><?php echo $logo;?></div>  
  <div id="kopf_right">  
    <span>Eingeloggt als <?php echo ADMIN_NAME;?></span>  
    <span><u>logout</u></span>  
    <span><?echo $inc_mail;?></span>  
  </div>  
  <div id="main">  
    <div id="menu"><?echo $navigation;?></div>  
    <div id="content"><?echo $ausgabe;?></div>  
  </div>  
  <div id="footer">by schnalbi</div>  
</div>

#container{  
  margin-top: 10px;  
  margin-left: auto;  
  margin-right: auto;  
  width: 95%;  
}  
  
#kopf_left{  
  color:  #333388;  
  padding-top: 10px;  
  padding-left: 30px;  
  position: relative;  
  float: left;  
  width: 400px;  
  font-size: 16px;  
  text-align: left;  
  background-color: #ffffff;  
  height: 50px;  
  font-weight: bold;  
}  
  
#kopf_right{  
  background:url("../bilder/hg/kopfrechtsbg.jpg") no-repeat right;  
  background-position:10px 0 0 0;  
  background-color: #ffffff;  
  padding-right:50px;  
  padding-top: 10px;  
  margin-left: 400px;  
  text-align: right;  
  height: 50px;  
  font-size: 14px;  
  font-weight: bold;  
}  
  
#main{  
  margin-top: 20px;  
  
}  
  
#menu{  
  float: left;  
  width: 140px;  
  background-color: #e3eeee;  
  border-right: 1px solid #222244;  
  border-bottom: 1px solid #222244;  
  font-size: 12px;  
  
}  
  
#content{  
  height: auto;  
  width: auto;  
  margin-top: 15px;  
  margin-left: 150px;  
}  
  
#footer{  
  clear: both;  
  background-color: #aaddff;  
  color: #000;  
  clear: both;  
  text-align: center;  
  
}  
  
div.tools{  
  background-color: #f3f7ff;  
  width: auto;  
}  
  
div.tools li{  
  float: left;  
  width: 100px;  
  display: block;  
  margin: 10px;  
  background-color: #e9f0fd;  
  text-align: center;  
  font-size: x-small;  
  list-style:none;  
}  
  
div.legende{  
  background:url("../bilder/hg/kopf.jpg") repeat-x;  
  border-left: 1px solid #779ed5;  
  border-bottom: 1px solid #779ed5;  
  border-right: 1px solid #779ed5;  
  -moz-border-radius-topleft: 10px;  
  -moz-border-radius-topright: 10px;  
  -khtml-border-radius-topleft: 10px;  
  -khtml-border-radius-topright: 10px;  
}