Problem mit "aside" und "sidebar1"

Die Seitenstruktur lässt sich aus dem Screenshot nicht ersehen, aber ich vermute mal, dass es mit einem fehlenden clear zusammenhängt. Außerdem solltest du auf den Einsatz des Attributs position grundsätzlich verzichten, solange du noch nicht viel Erfahrung mit CSS gesammelt hast. Elemente innerhalb einer Seite werden mit margin zueinander positioniert.

Hallo,

für das Problem gibt es keine richtige Lösung, da die einzelnen Elemente / Spalten nicht aufeinander reagieren können.

Als klassischen Ausweg solltest du nach "faux columns" googeln. Damit wird optisch eine gleichlange Spaltenhöhe vorgegaukelt. Ein Vorteil ist, das damit fast alle Browser klarkommen.

Aktuell gibt es das Flexbox-Modell. Das wird aber erst seit relativ kurzer Zeit von fast allen Browsern unterstützt. Von daher werden viele User damit noch nicht klarkommen.

Und als drittes könntest du eine Lösung mit den css-Anweisungen "display-table" und "display-table-cell" erstellen.

Mit deinem aktuellen Code sehe ich aber noch größere Probleme. Im Quelltext werden zum Beispiel Abstände durch das br-Element erzeugt. Das ist sachlich schlicht ein Fehler und erschwert spätere Änderungen.

Mit zwei, drei, vier oder fünf Anpassungen ist es also bei deinem Wunsch nicht getan.

Gruss

MrMurphy

Muss gar nicht so kompliziert sein. Wenn ich ein Parent mit zwei Childelementen habe, die gefloatet werden, und das Parent sich in seiner Größe den Childs anpassen sollen, dann könnte man quasi als drittes Child ein leeres Div mit einem clear hinzufügen. Ist zwar nicht schön, funktioniert, aber.

In der Praxis setze ich allerdings lieber auf grid-basierte Frameworks. Da stellen sich solche Probleme gar nicht.

Ein overflow:hidden oder ein float:left für das Parent-Div sollte reichen. Hintergrundfarbe mit background:rgba() notieren.

Du benötigst im oberen Context gar kein position. Dieses Attribut hat durchaus seine Berechtigung, aber nicht als Layout-Ersatz für margin und padding.

Wobei ich beim obigen Code übersehen hatte, dass du nicht position sondern height und max-height auf relative gesetzt hast, und das ist natürlich auch falsch.