Zentrieren mit Mindestabstand beim Floaten

[Rolf B]

Hallo Tini,

grundsätzlich lautet die Antwort heute eigentlich: Benutze float dafür nicht mehr, sondern Flexbox oder Grid. Mit Flexbox brauchst Du für eine Seite mit Header, Navigationsleite links und Footer diese Grundstruktur:

<header>
</header>
<div class="mainPart">
<nav>
</nav>
<main>
</main>
</div>
<footer>
</footer>

Und diese CSS Eigenschaften:

.mainPart { display: flex; }

nav { flex: 0 0 10em; }
main { flex: 1 0 auto; }

display:flex aktiviert das Flexbox-Layout. Die flex-Eigenschaft vereint flex-grow, flex-shrink und flex-basis; das liest Du Dir besser im Wiki genauer durch. Hier nur so viel: flex: 0 0 10em macht das nav Element 10em breit und verändert die Breite nicht, wenn sich die Breite des Browserfensters ändert. flex: 1 0 auto als Partner dazu lässt das main Element den Rest füllen. In den meisten Fällen reicht diese Struktur aus. Dein zentriertes DIV kannst Du dann ins main Element hineinlegen (du machst das mit margin:auto, gelle?)

Willst Du rechts von main noch eine Info-Box unterbringen, füge ins .mainPart div noch ein aside-Element hinzu und gib ihm ebenfalls flex: 1 0 xxx (xxx=benötigte Breite). Willst Du main und aside in einem bestimmten Breitenverhältnis haben, z.B. 3:1, dann setze diese Zahlenwerte bei flex-grow (also dem ersten Wert der flex-Eigenschaft) ein.

Rolf