jensi: probleme bei meinem neuen layout mit <div>

hallo!

ich mache gerade eine website und erstelle dafür das gerüst. ich möchte einen header haben, dann ein menü (auf der rechten seite), einen inhaltsberech (rechts) und am schluss einen footer.
das mit dem header und footer klappt gut, aber probleme hab ich bei inhalt und menü. ich möchte, dass das menü auf der linken seite so groß ist wie der längste eintrag und dass der inhalt den restlichen platz einnimmt. das mache ich, indem ich der navigation ein float:left gebe. allerdings gebe ich nicht (so wie hier in selfhtml im beispiel) eine meindestbreite an.
und dann passiert das, was ich nicht will: wenn das menü auf der linken seite vertikal größer ist als der inhalt, dann ist der inhalt plötzlich  zentriert. das sieht dann so aus:

-------------------------------
|           header            |
-------------------------------
________
|      |
| navi |
| menü1|______________________
| menü2|   zeile1             |
| menü3|   zeile2             |
| menü4|   zeile3             |
| menü5|   zeile4             |
| menü6|   zeile5             |
| menü7|______________________|
| menü8|
| menü9|
|______|
-------------------------------
|           footer            |
-------------------------------

ich hätte es aber lieber so:

-------------------------------
|           header            |
-------------------------------
 ______  _____________________
|      ||   zeile1            |
| navi ||   zeile2            |
| menü1||   zeile3            |
| menü2||   zeile4            |
| menü3||   zeile5            |
| menü4||_____________________|
| menü5|
| menü6|
| menü7|
| menü8|
| menü9|
 ______
-------------------------------
|           footer            |
-------------------------------

könnt ihr mir dabei helfen?

so sieht der quelltext aus:~~~html

<div id="header" style="background:lime;">
header
</div>

<div id="menü" style="float:left; background:red;">
<ul>
<li>ganz</li>
<li>viele</li>
<li>menüpunkte</li>
</ul>
</div>

<div id="inhalt" style="background:green;">
inhalt inhalt inhalt
</div>

<div id="footer" style="background:green;">
footer
</div>

  
PS: das css ist jetzt nur zum demonstrieren da. nacher tu ich das in eine eigene datei und auch die farben sind nur zum verdeutlichen.  
  
bitte helft mir dabei! danke!
  1. [latex]Mae  govannen![/latex]

    könnt ihr mir dabei helfen?

    Bin gerade etwas eilig, daher ohne selber zu testen:
    Da die Navi gefloatetet ist, brauchts wohl danach ein clear

    Cü,

    Kai

    --
    Some things in life are bad, they can really make you mad
    Other things just make you swear and curse.
    When you're chewing on life's gristle, don't grumble, give a whistle
    And this'll help things turn out for the best...
    ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]
  2. Hallo,

    und dann passiert das, was ich nicht will: wenn das menü auf der linken seite vertikal größer ist als der inhalt, dann ist der inhalt plötzlich  zentriert. das sieht dann so aus:

    Wie schon von Kai345 erwähnt, scheint ein clear zu helfen.
    Z.B.: <div id="footer" style="background:green;clear:left"

    Allerdings habe ich mal den Code ausprobiert, dabei rutscht hier der footer
    hoch, und "zentriert" schaut das nicht aus. Mit welchem Browser sieht es
    eigentlich aus wie von dir beschrieben (oder lag es an etwas anderem Code)?

    Grüsse aus Düsseldorf

    Cyx23