nicht angemeldet
Hallo
Die eigentliche Ursache für dein vermeintliches Problem sind die "Collapsing Margins".
Das von dir beobachtete Verhalten ist also genau so vorgesehen.
Du musst die "Collapsing Margins" halt unterdrücken. Dafür gibt es verschiedene Möglichkeiten.
Damit die Auswirkungen besser sichtbar sind kannst du zunächst dem zweiten div (content) folgendes margin zuweisen:
margin:10em auto 1em auto;
Beide div rutschen dadurch erst einmal deutlich runter.
Dann kannst du zum Beispiel vor dem ersten div eine Überschrift eingeben, also
<body>
<h1>Überschrift</h1>
<div id="navidiv">Warum ist über diesem Div ein roter Streifen?
und das Ergebnis anschauen.
Danach als weitere Möglichkeit die Überschrift wieder löschen und dem body einen oberen Rand von 1px zuweisen:
body {
background-color: #f88;
border-top: 1px solid blue;
}
Als Farbe kannst du zum Beispiel auch transparent auswählen, die ist also egal.
Und schauen.
Für weitere Infos kannst du "Collapsing Margins" in die Suchmaschine deiner Wahl eingeben.
Float und Flexbox haben vollkommen unterschiedliche Aufgaben. Float läßt sich deshalb nur durch Flexbox ersetzen, wenn es mißbräuchlich eingesetzt wurde.
Wenn der Text des zweiten div das kleinere erste div umfließen soll läßt sich Float nicht durch Flexbox ersetzen, da es korrekt verwendet wurde. Mit Flexbox könnten die "nur" nebeneinander gestellt werden.
Richtig ist hingegen, das bei Flexbox grundsätzlich die "Collapsing Margins" unterdrückt werden.
Das läßt sich beobachten wenn zunächst mehrere Absätze (p-Elemente) in einen Container (zum Beispiel article-Element) geschrieben werden, die ganz normal obere und untere Abstände (margin) haben.
Wenn anschließend die Absätze mit Flexbox und "flex-direction: column;" angeordnet werden, werden die Abstände zwischen ihnen größer, da die "Collapsing Margins" unterdrückt werden.
Gruss
MrMurphy
Friedel
Matthias Apsel
Fred