Horst Nogajski: Verschachtelte div-container mit Mindesthöhe ?

Beitrag lesen

Hallo zusammen,

ich versuche ein Layout ohne verpönte Tabellen zu erstellen und habe schon einiges über die unterschiedlichen Browserverhalten (meist IE 5x 6x auf PC nicht beim Mac) bei CSS-Boxen hier gelesen. Das man die Browser per CSS-Hacks mit verschiedenen Selectoren (CSS1 CSS2 CSS2.1) austricksen kann usw. Klingt alles relativ kompliziert für mich. Deshalb habe ich mich für ein einfaches Layout entschieden bei dem ich kein Border oder Padding verwende:

________________html-body________________________
|                                               |
|   -----------------div_main--------------     |
|   | div_ |                              |     |
|   | menu |                              |     |
|   | ...  |    div_head                  |     |
|   | ...  |                              |     |
|   | ...  |                              |     |
|   |      |------------------------------|     |
|   |      |                              |     |
|   |      |    div_content               |     |
|   |      |                              |     |
|   |      |                              |     |
|   | #### |                              |     |
|   -----------------div-main--------------     |
|                                               |
_________________________________________________

Ich habe aber trotz des einfachen Layouts einige Dinge noch nicht zu meiner Zufriedenheit lösen können. Vielleicht kann mir ja jemand bei dem einen oder anderen Problem helfen:

  1. das div_menu sollte immer so hoch sein wie div_main. Bisher habe ich min-height gesetzt, das ja aber der IE nicht kennt.

  2. im div_menu sollte immer unten noch ein weiteres div sein (####), und egal wie weit das Menü ausgeklappt ist, dieses neue div sollte immer unten bündig sein. Evtl. könnte es auch ein div unter dem div_menu sein, wenn es denn immer an bottom vom div_main ausgerichtet bleibt. (Und wenn das mit dem min-height beim div_menu nicht geht, kann ich dem div_main den gleichen grauen Hintergrund geben wie div_menu. Dann sieht das schon mal gut aus, auch wenn's ein bischen geschummelt ist, ;))

  3. div_head wird niemals in der Größe verändert werden, aber div_content kann natürlich mal mehr mal weniger Inhalt bekommen. Deshalb sollte sich die Höhe von div_content und gleichzeitig auch von div_main u. div_menu mit 'verlängern'. Sprich, die Seite wächst einfach nach unten weiter. Bisher ist es im IE so, das div_main mitwächst, aber div_menu nicht. Im Firefox wächst sogar einfach nur der Text aus dem div_content neraus, :(

Es gibt natürlich einen Link um sich das Dilemma anzuschauen: http://biriba.oficinadacapoeira.de/
Menüpunkt 1 & 2 haben wenig Inhalt und 3 & 4 viel!

Viele Grüße,
Horst