nicht angemeldet
box-sizing padding
0 
Matthias Apsel
0 
Rolf B
0 
Gunnar Bittersmann
0 0 Rolf B
0
box-sizing padding
Ich habe den body (border-box) mit prozentualen Angaben in 2 Teile geteilt (80+20%). In beiden will ich mit padding einen Abstand zur box erzielen, dann rutsch aber die rechte Box nach unten weil wohl breiter wird.
Teil des CSS:
body {text-align: center;
display: flex;
flex-flow: row wrap;
box-sizing:border-box;
margin: 10px;
}
main {
background: #B0E2FF;
width:80%;
overflow-y: scroll;
float:right;
}
menu {
float: left;
background: #F5F5F5;
width:20%;
overflow-y: scroll;
overflow-x: hidden;
}
article {background:#0C3;
margin-top:5px;
padding-left:5px;
color:#FFF;
}
Ich habe padding mit px und % ohne Erfolg versucht.
article ist Teil des Main, da funktioniert das padding.
Website http://wentzell.eu/
Reichen diese Angaben um mir zu helfen? Im Voraus schon DANKE!!
Karl-Heinz
sorry, mit Markdown komme ich nicht klar.
-
Hallo LAW-Web,
sorry, mit Markdown komme ich nicht klar.
Da das wohl für viele Leute zutrifft haben wir ein paar Icons über dem Texteingabefeld platziert.
Bis demnächst
Matthias--
Rosen sind rot. -
Hallo Karl Heinz,
-
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.
-
box-sizing wird nicht vererbt. Das musst Du dort explizit angeben, wo Du es brauchst.
-
deswegen werden deine floats zu breit, wenn Du padding hinzufügst ohne die Breite zu reduzieren.
-
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-
@@Rolf B
box-sizing wird nicht vererbt. Das musst Du dort explizit angeben, wo Du es brauchst.
Wo man’s immer braucht:
*, ::before, ::after { box-sizing: border-box }Du kannst alternativ zu box-sizing die Breite mit calc berechnen
Unnötig, wenn man generell
box-sizing: border-boxverwendet.float ist die falsche Technik für Layouts. Das war es schon immer, aber früher ging es nicht anders.
table? [duckundweg]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.
Oder doch noch einen Fallback – z.B. mit Floats. 😜
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
hallo
Oder doch noch einen Fallback – z.B. mit Floats. 😜
Naja, wird flex nicht verstanden, so haben wir halt display:block-Fluss.
Das Problem erscheint dort, wo flex im Buggy unterwegs ist.
@support(display:flex){ /* flexbox Regeln hier */ }--
Neu im Forum! Signaturen kann man ausblenden! -
Hallo Gunnar,
Du kannst alternativ zu box-sizing die Breite mit calc berechnen Unnötig, wenn man generell
box-sizing: border-boxverwendet.Vielleicht möchte man das ja aus anderen Gründen nicht (kopfkratz...)
float ist die falsche Technik für Layouts. Das war es schon immer, aber früher ging es nicht anders.
table? [duckundweg]Ich nehme mir gleich einen Table und schmeiß' ihn die 495km bis zu Dir...
Oder doch noch einen Fallback – z.B. mit Floats. 😜
Mach nur.
Rolf
--
sumpsi - posui - clusi
-
-
Allen herzlichen Dank!!! Ich werde mal versuchen mich mit GRID durchzuschlagen Karl-heinz
-