2 Div-Container in einem Div untereinander mit jew. fester Höhe

[Der Martin]

Hallo,

willkommen auf dem Holzw in der Welt des Webs!

Für eine TestPage müsste ich folgendes realisieren:

• ein Div oben, top 0px, Breite 100% Höhe 180px 'position: fixed;'.
• In diesen Container sollen jetzt 2 Div's, untereinander mit fester Höhe, der obere H: 150px, der untere dann 30px.
• Beide inneren Div's Breite 1200px, zentriert.

Diese Anforderungen enthalten mehrere gravierende Fehler.

Angefangen bei der Verwendung von div-Elementen, die keine eigene Bedeutung (Semantik) mitbringen. Was sollen diese Elemente wirklich sein? Ein Header? Überschriften? Eine Navigation? Verwende doch ruhig die Elemente, die die Bedeutung am besten beschreiben.

Dann Größenangaben in Pixeln. Du weißt nicht, wie groß die Anzeige bei deinen Besuchern überhaupt ist. Eine Breite von mehr als 1200px vorauszusetzen, ist mehr als optimistisch. Außerdem sollten die Maße deiner Boxen möglichst zur Schriftgröße passen, oder? Auch die kannst du nicht im Voraus ahnen. Jemand, der schlecht sieht, hat möglicherweise einen Default-Zoomfaktor von 150% eingestellt. Oder eine Mindestschriftgröße von 28px.
Gib also die Maße flexibel an. Zum Beispiel in Prozent bezogen aufs Elternelement. Oder in em, dann skalieren sie mit der Schriftgröße.

Und schließlich position:fixed. Überlege genau, ob das wirklich eine gute Idee ist. Immerhin ist damit die Höhe des fixierten Bereichs permanent nicht für andere Seiteninhalte verfügbar.

Soweit bin ich bis jetzt, es funktioniert auch solange im oberen Div kein Text steht. Aber sobald im oberen Div Text steht, und das wird auch sein, und zwar verschiedener Text in den versch. Pages, drückt es den oberen Div plötzlich um ca. 25 - 30 px nach unten, wodurch dann der untere Div aus dem 'Parent Div' herausrutscht.

Wenn du den beiden inneren Containern eine feste Höhe gibst, kann das eigentlich nicht passieren. Aber das solltest du eher nicht. Lass den äußeren Container mitwachsen, wenn das nötig ist.

Was ich also bräuchte wäre eine Möglichkeit den beiden inneren Div's eine feste Höhe zu geben, egal ob Inhalt - egal welcher - oder kein Inhalt.

Was wir gemeinsam bräuchten, wäre ein Live-Beispiel, an dem wir eine sinnvolle Lösung erarbeiten können.

Immer eine Handbreit Wasser unterm Kiel
 Martin