Rolf B: box-sizing padding

Beitrag lesen

SELF-Forum

box-sizing padding

Rolf B
– Informationen zu den Bewertungsregeln

Hallo Karl Heinz,

  1. ein Wrapper-DIV ist unnötig. Bei Dir macht es obendrein noch den display:flex im <body> unwirksam. Diese Flexbox hat jetzt nämlich nur noch ein Flex-Element.

  2. box-sizing wird nicht vererbt. Das musst Du dort explizit angeben, wo Du es brauchst.

  3. deswegen werden deine floats zu breit, wenn Du padding hinzufügst ohne die Breite zu reduzieren.

  4. Du kannst alternativ zu box-sizing die Breite mit calc berechnen: width: calc(20% - 2em);, wenn Du insgesamt 2em horizontales Padding hast. Die Leerzeichen um das Minuszeichen sind syntaktisch relevant.

#Und nun zur eigentlichen Antwort

float ist die falsche Technik für Layouts. Das war es schon immer, aber früher ging es nicht anders. Heute nimmt man dafür entweder Flexbox oder Grid. Alte Browser, die das nicht können, bekommen die "von oben nach unten" Ansicht für Mobilgeräte. Das Mobil-Layout macht man ja eh zuerst.

D.h. entweder legst Du dein Wrapper Div (dafür ist es nötig) um nav und main und machst es zur Flexbox, um mit flex-Attributen auf nav und main die Breiteneinteilung festzulegen (damit kannst Du auch nav eine fixe Breite geben während main den Rest füllt).

Oder, besser, du definierst dein komplettes Seitenlayout als Grid, dann brauchst Du keinen Wrapper. Und kein box-sizing. Und kein gefloate.

Rolf

--
sumpsi - posui - clusi
Beitrag melden
–
Informationen zu den Bewertungsregeln