azok: Breite von 2 Ebenen

hi!

Ich bin gerade dabei ein neues layout für meine HP zu entwerfen. (Ja, das alte gefällt mir überhaupt nicht mehr...) - allerdings scheitere ich  beim Positionieren zweier Ebenen. Ich poste jetzt einfach mal kurz den Css bzw. HTML-Code:

  
div#main {  
 position:relative;  
 min-height:100%; height:100%; /* height:100%; workaround for IEs*/  
 margin:0 auto;  
 width:43em;  
 border:3px black double;  
 border-top:none; border-bottom:none;  
}  
div#banner {  
 position:relative;  
 height:10em;  
 width:auto;  
 background-color:#00CC99;  
}  
div#cite {  
 position:relative;  
 height:1.5em; padding:0.2em;  
 width:auto;  
 background-color:#009999;  
}  
div#menu {  
 position:relative; padding:0.2em;  
 float:right;  
 width: /* ??? */  
 background-color:#003366;  
}  
div#content {  
 position:relative; padding:0.2em;  
 width: /* ??? */  
 background-color:#006666;  
}  
div#footer {  
 position:relative;  
 width:100%; height:auto;  
 background-color:#000066;  
 clear:right;  
}  

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">  
<head>  
<title>%title%</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<link rel="stylesheet" title="Stylesheet für peterheinrich.at.tt" type="text/css" href="stylesheets/main.css" />  
</head>  
<body>  
  
<div id="main">  
 <div id="banner">%bild%</div>  
 <div id="cite">%Zitat%</div>  
 <div id="menu">%Menü%</div>  
 <div id="content">%inhalt%</div>  
 <div id="footer">%copyright%</div>  
</div>  
  
</body>  
</html>  

Die beiden Ebenen "menu" und "content" habe ich nun mittels float nebeneinander gestellt. Beide besitzen ein padding von 0.2em. - Nun hätte ich gerne, dass die beiden Ebenen "aufgeteilt" werden- die "menu" mit 30% Breite bzw. die "content" mit z.b. 70% Breite. Allerdings erwische ich keine passenden Werte, dass diese in allen Browsern gleich aussehen. - Mit %tueller Breitenangabe macht mir der IE einen weißen Strich zwischen beide Ebenen, mit em geht es so gut wie gar nicht zu lösen (fast jeder Browser interpretiert diese ja unterschiedlich...).

Ein weiteres Problem gibt es dann noch: Ich hätte gern, dass die Ebene "footer" immer am unteren Rand der Anzeigefläche "klebt" bzw. die Ebene "content" den Rest so weit ausfüllt, dass immer der Anzeigebereich in der gesamten Höhe genutz wird. - Ich habe das alles schon mit min-height etc. probiert, allerdings funktioniert das nicht wirklich... (spiele ich mich mit nur mit "height" macht der IE wieder Probleme...)

Ich hoffe, ihr wisst, was ich meine bzw. könnt mir dabei helfen. Ich freue mich schon auf eure Antworten. - Danke schon auch im Voraus.

lg
azok

--
Murphys Law: "Alles Schöne im Leben ist entweder illegal, ungesetzlich oder es macht dick."
Mein Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:( n4:° ss:) de:> js:| ch:? sh:) mo:) zu:)