Anfängerproblem DIV, Text setzt sich nicht nach von div's fort sondern rechts daneben

woodwide · 16.04.2020

Hallo zusammen,

ich habe auf einer Seite im body-Tag folgende Struktur:

Code:

<div style="float: left; width: 30%; background-color: #eeeeee; border: 1px solid black; margin-right: 5px; padding: 5px;">Versandmethode</div>

<div style="float: left; width: 60%; background-color: #eeeeee; border: 1px solid black; margin-bottom: 5px; padding: 5px;">Postzustellung</div>

<div style="clear: float;"></div>

Die Titel stehen in der linken Box, die Einträge in der rechten. So weit so gut.
Das ganze geht über mehrere Reihen, jede Reihe hat immer 2 divs.

Wenn ich jetzt unterhalb des letzten divs weitermachen möchte, erscheint der Text am rechten Rand des Browsers, und nicht darunter, wie es eigentlich sein sollte. Was muss ich da ändern?

Ausserdem hätte ich gerne eine volle Ausnutzung des rechten div-Containers, das klappt aber nicht, weil der nach unten rutscht, sobald ich die Breite auf 70 % setze. Wie könnte ich volle 100 % Seitenbreite nutzen? Der 30 % Container soll links sein und der 70 % Container rechts daneben.

LG!
Christian

curzon · 23.04.2020

AW: Anfängerproblem DIV, Text setzt sich nicht nach von div's fort sondern rechts dan

Hallo, float würde ich dazu nicht verwenden.

HTML:

<body style="margin:0px;">
<div style="display:flex; flex-wrap:wrap; justify-content:space-between; width:100%;">
	<div style="max-width: 30%; width:30%; background-color: #eeeeee; border: 1px solid black;">Versandmethode</div>
	<div style="max-width: 69%; width:100%; background-color: #eeeeee; border: 1px solid black;">Postzustellung</div>
	<div style="max-width: 30%; width:30%; background-color: #eeeeee; border: 1px solid black;">Versandmethode222</div>
	<div style="max-width: 69%; width:100%; background-color: #eeeeee; border: 1px solid black;">Postzustellung222</div>
	<div style="max-width: 30%; width:30%; background-color: #eeeeee; border: 1px solid black;">Versandmethode333</div>
	<div style="max-width: 69%; width:100%; background-color: #eeeeee; border: 1px solid black;">Postzustellung333</div>
</div>
</body>

an der zweiten Box is 69%, da 70% nicht verwendbar ist, weil border: 1px solid black; zu den 30% und 70% 1px dazu addiert und die Box vergrößert.
So ist der Code auch im responsive Design