paulbrause: "float: left" richtig genutzt?!?

Beitrag lesen

hallo mal wieder,

ich schlage mich immer noch mit css rum, ich steig da erst so langsam hinter... ;)

folgendes möchte ich realisieren:
ich möchte ein farbiges rechteck haben, in dem meine n avigation angezeigt wird... dabei sollen die 6 menüpunkte in 3x2 aufgeteilt und linksbündig in dem genannten rechteck angezeigt werden...

so sollte es also aussehen:
-------------------------------------------------------------
|                                                           |
|  menüpunkt1       menüpunkt2      menüpunkt3              |
|  menüpunkt4       menüpunkt5      menüpunkt6              |
|                                                           |
-------------------------------------------------------------

also habe ich folgendes versucht:

[html]
<div class="box">
 <a href="link.php">menüpunkt1</a>
 <a href="link.php">menüpunkt2</a>
 <a href="link.php">menüpunkt3</a>
 <a href="link.php" class="clear">menüpunkt4</a>
 <a href="link.php">menüpunkt5</a>
 <a href="link.php">menüpunkt6</a>
</div>

[css]
div.box {
 background-color: #194462;
 color: #F5F5F5;
 margin-top: 5px;
}
div.box a {
 display: block;
 float: left;
 width: 100px;
 color: #F5F5F5;
 text-decoration: none;
 text-align: right;
 padding-left: 10px;
}
div.box a.clear {
 clear: both;
}

folgendes funktioniert dabei aber nicht:
1. die navi sieht folgendermassen aus:

----------------------------------------------------------------------------------------
|                                                                                      |
|  menüpunkt1       menüpunkt2      menüpunkt3      menüpunkt5      menüpunkt6         |
|  menüpunkt4                                                                          |
|                                                                                      |
----------------------------------------------------------------------------------------

also nur der 4.menüpunkt, der "clear: both" im css hat, wird in die nächste zeile verschoben... sollte da nicht alles was nachfolgend ist auch gecleart werden?!? und wenn nicht, warum nicht?!?

2. was fast noch "schlimmer" ist... die hintergrundfarbe der div.box wird gar nicht angezeigt... warum das denn schon wieder?!?

muss ich etwa die menüpunkte 1&4 bzw. 2&5 und 3&6 noch mal in eigene divs packen, die ich dann komplett floate?!?

danke schon mal...
der paule