Wie bekomme ich es hin, ohne feste Abstände eingeben zu müssen, dass der2. Container ganz normal unter dem 1. erscheint?
Du stellst schon mal keine so schlechte Frage. Das Problem ist weniger der zweite Container als der erste.
Dein Code macht im Grunde genau das, was zu erwarten wäre, aber dir fehlt an dem Punkt noch ein Stück weit das grundlegende Verständnis der angewandten Techniken und das Wissen, wann und wie man sie richtig anwendet.
Kein Problem, das kommt mit der Zeit!
Wie schon gesagt, ist deine Frage an einem Punkt gar nicht so falsch. Du willst keine festen Abständen eingeben und den zweiten Container irgendwie mit viel Gefrickel unter den ersten positionieren müssen.
Das Problem ist ein relativ typischer Anfängerfehler bzw. eigentlich sind es im Wesentlichen zwei.
1. Du nutzt CSS Floats, um das Bild neben dem Text auszurichten. Das kann man grundsätzlich machen, mittlerweile gibt es aber deutlich bessere und flexiblere Mittel, um die verschiedensten Positionierungen und Layouts zu erreichen.
Die modernen Alternativen wären CSS Flexbox und/oder Grid, aber lassen wir das erstmal beiseite, da es für den konkreten Fall wahrscheinlich zu viele Fragen aufwirft und dich eventuell mehr verwirrt als dass es dir hilft. Trotzdem: Für die Nahe Zukunft auf jeden Fall mit Flexbox und Grid auseinandersetzen.
Das Problem mit Floats ist, dass du damit den Dokumentenfluss beeinflusst und wenn einmal angewandt, alle nachfolgenden Elemente sich entsprechend auch gemäß dem Float anordnen. In deinem Fall werden also alle nachfolgenden Elemente nach links neben das Bild positioniert, weil das Bild mit
float: right nach rechts positioniert wurde und damit dafür sorgt, dass der Dokumentenfluss sozusagen links an dem Bild vorbei fließt, wenn du verstehst, was ich meine.
Google ggf. für bessere Erklärungen mal nach CSS floats, dort sollte eigentlich fast überall auf die Problematik eingegangen werden.
Wie löst man das Ganze? Nun, eigentlich indem man Floats nicht mehr nutzt, aber es gibt eine Möglichkeit, um die Floats sozusagen in einem bestimmten Container zu halten und nach diesem Container den normalen Dokumentenfluss wieder herzustellen. Das Ganze nennt sich Clearfix.
Hierfür findest du online wahrscheinlich tausende unterschiedliche Lösungen, aber hier mal exemplarisch eine Lösung, die ich früher verwendet habe:
.clearfix::after {
content: ".";
display: block;
clear: both;
font-size: 0;
height: 0;
visibility: hidden;
}
Letztendlich ist das einfach etwas, was man sich einmal rauskopiert und dann einfach anwenden kann.
Angewendet wird es, indem du dem Container, der sozusagen dein gefloatetes Element (in deinem Fall das Bild) beinhaltet, die entsprechende Klasse clearfix zuweist.
Das sorgt dann dafür, dass nachfolgende Elemente, die nicht gefloatet werden sollen, wieder im normalen Dokumentenfluss liegen.
Sieht dann bei dir so aus:
<div class="clearfix">
<img src="Bild/Bild1.jpg" class="Bild" />
<p class="Text">Hier steht ein Text, daneben befindet sich ein Bild. Das ist so weit in Ordnung</p>
</div>
<div>Dieser Text soll unter dem oberen Div Container stehen, steht aber mitten drin</div>
2. Du nutzt absolute/relative Positionierung in einer Weise, die so nicht gedacht ist.
position: absolute respektive
position: relative sind mächtige Werkzeuge, die es dir theoretisch ermöglichen, Elemente an beliebiger Stelle zu platzieren, und das auf den Pixel genau. Dafür ist die absolute/relative Positionierung aber nicht gedacht, vor allen Dingen nicht, um ganze Layouts oder die Ausrichtung von Elementen zueinander zu bestimmen, wie du es in deinem Fall machst.
Anfänger sollten im Grunde eigentlich erstmal die Finger davon lassen, da man sonst dazu neigt, die Technik falsch anzuwenden.
Bei richtiger Anwendung nutzt man absolute/relative Positionierung eigentlich nur noch für kleine Spezialfälle, aber niemals als grundsätzliche Layout-Technik.
Ein Beispiel wären Elemente, die sich überlapppen/aufeinander liegen sollen oder sonstwie sich komplett anders verhalten und außerhalb des Hauptlayouts und Dokumentenflusses liegen sollen.
Das führt uns auch zum Grund, warum der zweite Container so komisch irgendwo neben dem Bild erscheint, in Kombination mit dem Floating-Problem selbstverständlich.
Mit
position: relative sagst du einem Element (in dem Fall deinem Text), es soll sich doch bitte an der gewünschten Position definiert mit
left,
top, usw. einfinden. Und zwar relativ zur eigentlichen, normalen Position im Dokumentenfluss/auf deiner Seite. Gleichzeitig soll dieser Platz, den das Element ursprünglich vor der relativen "Verschiebung" eingenommen hätte, reserviert werden. Dort entsteht dann praktisch eine leere Stelle, die nicht von anderen Elementen in Anspruch genommen wird.
Dies erkennt man auch daran, dass der Text des zweiten Containers nicht ganz oben am Rand steht, sondern etwas versetzt nach unten.
Hättest du absolute Positionierung verwendet, wäre kein Platz reserviert worden. Dann wäre das Element einfach aus dem Dokumentenfluss rausgenommen und nachfolgende Elemente könnten den Platz einnehmen.
Merke also, dass du mit absoluter/relativer Positionierung (und auch Floats) immer das jeweilige Element aus dem normalen Dokumentenfluss rausnimmst, sprich: es verhält sich nicht mehr wie erwartet und ordnet sich nicht einfach in die nächste "Zeile" darunter an, sondern wird damit praktisch auf eine zweite Ebene gelegt und kann dort unabhängig positioniert werden.
Wie kannst du es also besser machen?
Nun, das führt uns leider zurück zu Flexbox und Grid. Für grundlegende Layouts und Positionierungen sollte mittlerweile eigentlich (fast) immer Flexbox und/oder Grid angewandt werden.
Da
@Mat schon was in eine ähnliche Richtung zusammengebastelt hat, hier mal eine abgeänderte, einfache Lösung meinerseits. Die genaue Implementierung hängt aber natürlich davon ab, wie du genau dein Text positionieren willst.
Dies wäre einfach nebeneinander:
<div class="container">
<p>Hier steht ein Text, daneben befindet sich ein Bild. Das ist so weit in Ordnung</p>
<img src="//picsum.photos/800/600" />
</div>
<div><p>Dieser Text soll unter dem oberen Div Container stehen, steht aber mitten drin</p></div>
.container {
display: flex;
gap: 1rem;
}
.container img {
width: 50%;
}
Wenn du deinen Text aber z.B. innerhalb der linken Hälfte neben dem Bild zentrieren willst, könntest du Folgendes machen:
.container {
display: flex;
align-items: center; /* vertikale Zentrierung */
gap: 1rem;
}
.container p {
text-align: center;
}
.container img {
width: 50%;
}
Dies setzt voraus, dass dein Container nur einen Textblock enthält. Wenn du mehr brauchst, bräuchte es einen separaten Container für den Text.
