nicht angemeldet
Hallo,
Vielen, vielen, vielen Dank für Deine Hilfe!
Über den Trick mit der absoluten Positionierung und dem Padding habe ich auch schon nachgedacht. Allerdings stellt sich damit das Problem der horizontalen Zentrierung der beiden DIVs...
Gibt es dafür auch eine Lösung?
Da kommt es darauf an, was links und rechts von den horizontal zentrierten Elementen zu sehen sein soll und was die Höhe des Browserfensters füllen soll. Grundsätzlich gilt:
Elemente im normalen Fluss lassen sich horizontal zentrieren, indem man ihnen eine Breite < 100% des Elternelements und margin:auto gibt. In meinem Beispiel:
body { margin:0; padding:0; background-color:#00FFAF; width:800px; margin:auto; }
Absolut positionierte Elemente lassen sich _unschön_ horizontal zentriert positionieren, indem man ihnen eine Breite < 100% des Elements gibt an dem sie sich orientieren, sie an left:50% positioniert und mit margin-left:-[halbeBreite] zurechtrückt. Das führt allerdings unschönerweise dann dazu, dass bei schmalen Fensterbreiten der #header unerreichbar nach rechts aus dem Fenster herausrutscht. Besser ist es deshalb, dem absolut positionierten Element ein besseres Element zuzuweisen, an dem sie sich orientieren. Solche Elemente sind Elernelemente mit position ungleich static. In meinem Beispiel könnte das body sein.
body { margin:0; padding:0; background-color:#00FFAF; width:800px; margin:auto; position:relative; }
Nun orientiert sich #header an body und am CSS von #header muss nichts mehr geändert werden.
Allerdings: Gib mal dem html-Element eine Hintergrundfarbe und nimm einige Zeilen Inhalt aus dem #content raus. Dann siehst Du, wie weit body wirklich nach unten reicht. So richtig hilft da _alleine_ dann aber auch height:100% für body nicht. Denn wenn #content höher als 100% Fensterhöhe wird, fließt #content dann natürlich aus den body mit height:100% raus. Abhilfe brigt hier dann, dem #content den selben Hintergrund zu geben, wie body.
viele Grüße
Axel