linkes div / rechtes div - soll restlichen Platz einnehmen

[wsm]

Hallo,

ich sitze schon den ganzen Tag an einem (für mich) verzwickten Problem...

Ich habe ein Außendrumherum-div col1, darin zwei nebeneinander stehenden Menüpunkte menu1 und menu2 und darunter den Text textl:

  
<div id="col1">  
  <div id="menu1"><a href="menu1.htm" target="_self">menu1</a></div>  
  <div id="menu2"><a href="menu2.htm" target="_self">menu2</a></div>  
  <div id="textl">textl</div>  
</div>  

Mein CSS sieht zurzeit wie folgt aus:

  
#col1 {  
  width: 240px;  
  height: 415px;  
  float: left;  
  background-color: #C0C0C0;  
}  
  
#menu1 {  
  height: 30px;  
  float: left;  
  text-align: left;  
  margin-left: 25px;  
  background-color: #808080;  
}  
  
#menu2 {  
  height: 30px;  
  float: left;  
  text-align: center;  
  background-color: red;  
}  
  
#textl {  
  width: 215px;  
  height: 200px;  
  clear: both;  
  margin-left: 25px;  
  margin-top: 179px;  
  background-color: #404040;  
}  

Die background-color's sollen nur der Verdeutlichung dienen. ;-)

Die beiden Menüpunkte menu1 und menu2 sollen nebeneinander stehen. menu1 ist so breit wie sein Inhalt und menu2 davon abhängig.
menu1 soll linksbündig stehen und dort auch der Link, menu2 daneben und den gesamten zur Verfügung stehenden Restplatz neben menu1 einnehmen und demzufolge den Link darin zentrieren.

Ich weiß nicht, worin mein Denkfehler liegt oder was ich womöglich übersehe. width: 100%; oder width: auto; erzielen nicht den gewünschten Effekt. Kann man das so überhaupt umsetzen?

Vielen Dank für den Gedankenaustausch. Mir raucht der Kopp... ~%-)

Grüße,
Thomas