CSS-Layout für Forum

[klausweidinger]

Ich bin gerade dabei, ein Forum mit CSS-Layout zu entwerfen und habe mit meinem CSS ein paar Probleme. Es soll zum Schluss eine Box sein, in der fünf andere Boxen nebeneinander angeordnet sind. Mein Code sieht bis jetzt so aus:

<div style="clear:both; border:red solid thin; padding:3px;">
  <div style="clear:both; float:left; width:40px; height:80px; border:orange solid thin; background-color:#efefef;"><img src="folder_big.gif" width="46" height="25" alt="Keine neuen Beiträge" title="Keine neuen Beiträge"></div>
  <div style="float:right; width:150px; height:80px; border:green solid thin; background-color:#dee3e7;">
      Mo Sep 01, 2008 07:36<br>
      <a href="/comm/forum/user-7011/">epsilon</a> <a rel="nofollow" href="viewtopic.php?p=108941&sid=ca7f71e95772d619e3af8a6d7d4e4541#108941"><img src="icon_latest_reply.gif" border="0" alt="Letzten Beitrag anzeigen" title="Letzten Beitrag anzeigen"></a>
  </div>
  <div style="float:right; width:60px; height:80px; border:orange solid thin; background-color:#dee3e7;">57223</div>
  <div style="float:right; width:60px; height:80px; border:green solid thin; background-color:#dee3e7;">7240</div>
  <div style="float:left; min-width:390px; height:80px; border:orange solid thin; background-color:#efefef;">
    <a href="/comm/forum/board-1/">Allgemeine Fragen</a><br>
    Wenn du dir nicht sicher bist, in welchem der anderen Foren du die Frage stellen sollst, dann bist du hier im Forum für allgemeine Fragen sicher richtig.
  </div>
</div>

Im firefox wird das ganze so angezeigt:

http://bildrian.de/n/b/1955f4c153343f90.png

Jetzt habe ich erstens das Problem, dass die Box, die die anderen fünf einschließen soll, dies nicht macht (das ist der rote schmale Rahmen oben), zweitens sind die ganz linke und die ganz rechte Box zu weit oben und drittens habe ich es noch nicht geschafft, eine minimale Breit für das ganze einzustellen (Denn wenn das Fenster zu schmal macht sieht es ohne minimale Breite sehr unübersichtlich aus).

Wäre nett, wenn mir jemand sagen könnte, wo da bei mir der Fehler liegt.

Edit: Hab die Fehler jetzt eigentlich selbst gefunden. Ein Schreibfehler ("flaot" statt "float"), ein überflüssiger </div> -Tag und ein paar andere Kleinigkeiten. min-width funktioniert auf einmal auch (weiß nicht wieso es vorhin nicht ging, vielleicht durch einen anderen Fehler bedingt).
Also, es passt soweit alles. Jetzt werde ich das Css noch auslagern, und dann ist zumiindest die Startseite fertig.

 

[prm]

Gib mal allen Boxen (außer er "Hülle") einheitlich ein float: left.
Ändere ggf. die Reihenvolge der Boxen.

Bevor du die Hülle mit dem roten Rahmen schließt, musst du clearen indem du das einfügst:

<div style="clear: both;"></div>

Das Höhenproblem kannst du lösen, indem du allen Boxen den gleichen height-Wert gibst, mit margin-top arbeitest oder (sinnvoll bei einzeiligem Text) eine line-height definierst.

 

[klausweidinger]

Naja, wie gesagt hab ich es jetzt selbst geschafft, das Problem zu lösen. Der Fehler lag wahrscheinlich darin, dass ich die große Box (aus Versehen) zu früh geschlossen habe (schon nach der 2. kleinen). Deshalb waren auch die ersten beiden kleinen Boxen leicht nach oben versetzt.
Nur mit float:left; zu arbeiten geht wegen der 2.Box von links nicht, da die nämlich die einzige ist, die eine variable Breite erhalten soll.
Und clearen muss ich auch nicht, da dieser Codeabschnitt sich ja die ganze Zeit wiederholt. Daher cleart dann die nächste große Box automatisch.
Aber trotzdem danke für die Antwort.

 

[klausweidinger]

Jetzt habe ich ein neues Problem, und zwar möchte ich eine kleine Grafik bzw. einen kurzen Text in einer Box einmitten. horizontal klappt das auch (halt standardmäßig mit text-align), aber vertikal nicht. Irgendwie funktioniert das vertical-align nicht. Ich habe es auch schon mit padding:*; versucht, aber es hat auch nicht geklappt. Wäre nett, wenn ihr mir helfen könntet.