nicht angemeldet
Rolf BHallo Josef,
du hast da eine bunte Mischung aus Positionierungen, und alle haben ihre eigenen Tücken.
position:fixed und float nehmen ein Element aus dem normalen Fluss heraus. Das linke Element ist ein Float und damit nicht mehr wirklich Teil des container-div. Seine Breite wird deshalb auch nicht mehr basierend auf diesem div berechnet. Das siehst Du auch am oben-div, das hast Du mit 80% angegeben und es ist genau so breit wie der Container.
Das links div bleibt aus dem gleichen Grund unter dem oben div. Sie sind beide aus dem normalen Fluss heraus, liegen also sozusagen auf gleicher Ebene. Das rechts div dagegen nicht, deshalb musst Du es mit margin von oben fernhalten.
Diese Begründungen habe ich mir jetzt auf Grund der Beobachtung zurechtgelegt. Hätte man mir das HTML/CSS trocken vorgelegt, hätte ich vermutlich was anderes erzählt 😉.
Du solltest ein konsistentes Positionierungsverfahren verwenden. Vermutlich werden sie aber alle einen "Nachteil" haben: Der Scrollbar wandert dann vom rechten Rand in den grünen Bereich hinein. Wenn das für dich ok ist, dann sind grid und flexbox eher das Mittel der Wahl.
Grundsätzlich solltest du dich auch an semantisches HTML gewöhnen. Statt eines Haufens div mit Klassen kann man Elemente wie header, footer, nav, main, section, article und aside verwenden. Also
<body>
<header></header>
<nav>Blauer Bereich</nav>
<main>Lorem ipsum</main>
<footer></footer>
</body>
Wenn dein .links Bereich keine Navigation ist, kannst Du dort auch aside verwenden.
Um das zu layouten, kannst Du dich mit flexbox und grid befassen.
Ein alternatives Verfahren, das ich vor einigen Jahren mal angewendet habe, ist ein Seiten-Layout mit position:absolute. Ich habe das hier mal rudimentär aufgebaut, es hat den "Vorteil", den neumodischen Schnickschnack wie flexbox und grid nicht zu brauchen und daher auch mit älteren Browsern zu kooperieren. Heutzutage ist dieser Vorteil aber kaum noch was wert.
Du positionierst dabei direkt, musst aber alles selbst ausrechnen.
header { position:absolute; left: 10%; width: 80%; top: 0px; height: 100px; }
footer { position:absolute; left: 10%; width: 80%; bottom: 0px; height: 100px; }
nav { position:absolute; left: 10%; width: 30%; top: 0px; bottom: 0px; }
main { position:absolute; right: 10%; width: 40%; top: 0px; bottom: 0px; overflow-y:auto}
Der Trick ist die gleichzeitige Verwendung von top und bottom, ohne Angabe von height. Damit werden die Boxen für .links und .rechts oben an den Header und unten an den Footer geklebt und passen sich der Fensterhöhe an. Einen Seiten-Scrollbar hat man dann nicht mehr, statt dessen bekommt der .rechts Bereich mit overflow-y:auto einen eigenen.
Mit flexbox geht es einfacher, weil man viel weniger magische Zahlen hat Hier das Beispiel. Ich habe die Höhe des body in vh angegeben (100vh = 100% Höhe Viewport), dann brauchst Du die 100% Höhe auf das html Element nicht. Das Beispiel zeigt zwei Flexbox-Bereiche. Einer vertikal, aus header, .mainBody und footer. Das div.mainBody ist ein Flex-Item und gleichzeitig eine Flexbox in horizontaler Richtung. Mit "flex:1" gibst Du an, dass das Item den freien Platz füllen soll und damit sparst Du die ganze Rechnerei.
Mit einem grid entfällt die Rechnerei komplett, und du kannst - wenn Du willst - sozusagen dein Layout in der CSS-Datei "aufmalen". Ein Beispiel wäre dies hier, aber schau Dir auch das Tutorial zu grid-Seitenlayout an, dass Du auf der von at verlinkten Seite findest.
Alle 3 Fiddles, die ich verlinkt habe, erzeugen das gleiche Ergebnis. Nur ist der Weg dahin mal mehr und mal weniger steinig 😀.
Rolf
Dosen sind silbern
marctrix
Gunnar Bittersmann