display inline in einem display block???

[hartkrass]

Hallo leute,
folgendes Problem, ich habe ein äußeres div, welches display:block ist (bspw. für eine Navi, die horizontal aufgebaut werden soll).
meine einzelnen einträge sollen innerhalb dieses divs platziert werden, am besten mit display:inline.
Leider passt sich die Höhe des äußeren divs nicht an

<div id="navi" style="display:block; width:100%; border:1px solid red;">
   <div style="display:inline; float:left; margin-left:20px;">
       Punkt1
   </div>
   <div style="display:inline; float:left; margin-left:20px;">
       Punkt2
   </div>
   <div style="display:inline; float:left; margin-left:20px;">
       Punkt3
   </div>
   <div style="display:inline; float:right; margin-right:20px;">
       Logout
   </div>
</div>
<div id="content" style="display:block; width:100%; border:1px solid red;">
   CONTENT
</div>

so in etwa hatte ich den CODE aufgebaut.
im "tollen" IE hat auch alles gepasst, aber im FF sieht man, dass die border der navi nur über den einträgen liegt und sie nicht umschließt, wie eigentlich gewünscht.
Wie kann ich das beheben? Was kann ich besser machen?

Grüße und Dank schonmal

 

[anna55]

Wie kann ich das beheben?

Im Div navi statt display: block

display:table;

und im Div content zusätzlich in den style

clear:left;

Was kann ich besser machen?

Was willst Du denn machen? Vernünftig wäre ein ordentliches Template z.B.
intensivstation :: CSS Templates :: Templates

und hier ne schöne Navi aussuchen
Stu Nicholls | CSSplay | CSS only menus

 

[dkdenz]

BTW: Dein div navi braucht kein display:block, da ein div von Haus aus ein Blockelement ist, außer man stellt es inline.