[nubi007]

Ich probiere jetzt schon seit Stunden rum und weiß mir keinen Rat mehr.
Ich habe einen Wrapper container mit einer festen Breite von 960px.
Innen mittig soll ein Container mit 560px Breite sein und links und rechts jeweils ein Container mit 200px Breite.

Irgendwie werden diese jeweils nicht nebeneinander angeordnet.
Vielleicht kann mir jemand helfen und sagen wie ich das am besten hinbekomme.
Ich hab schon alles an float ausprobiert.
In der html datei die verschiedenen divs verschoben.
Es wird eher schlimmer statt besser.

Wäre schön wenn mir jemand helfen könnte.
Also ein grundgerüst für drei nebeneinander liegenden div containern.

Danke sehr.

[MrMurphy]

Hallo

Statt float einfach Flexbox verwenden.

Gruss

MrMurphy

[nubi007]

Kennst du dich damit aus?hab mich bisschen belesen zu dem thema, da ich flexbox garnicht kannte.
wenn ich in so einem flexbox container oben eine art leiste als png einbauen möchte, hätte ich früher für links oben und rechts oben ein eckelement eingebaut und dann über die gesamt breite 1px x höhe px per repeat im div conatiner eingebaut.
geht das mit flexbox genauso?
und einzelne menüelemente kann ich dort genauso wie früher einbauen?

entschuldigt die dummen fragen, aber ich fange gerade wieder mit html und css an nach ein paar jahren pause.

[MrMurphy]

Hallo

Deine Angaben sind leider sehr mager.

wenn ich in so einem flexbox container oben eine art leiste als png einbauen möchte, hätte ich früher für links oben und rechts oben ein eckelement eingebaut und dann über die gesamt breite 1px x höhe px per repeat im div conatiner eingebaut.

Das verstehe ich nicht so recht. Leiste als png hört sich nach Quelltext aus dem vorigen Jahrtausend an. Gleiches gilt für leere Eckelemente.

Heutzutage sollten HTML-Elemente vermieden werden, der nur der Gestaltung dienen. Für die Gestaltung wird CSS verwendet. Für unterschiedliche Hintergrundfarben entweder linear-gradient oder radial-gradient oder svg-Bilder.

Für eine konkrete Hilfe benötigen wir konkrete Angaben von dir.

Gruss

MrMurphy

[nubi007]

So wie ich Zeit finde werd ich mal erklären bzw. etwas zeigen wie ich es meine.

[Toro]

Hallo Leute

Ich habe es auch schon mehrmals bemerkt, dass mathematisch gesehen die Sachen oft nicht so ganz passen. Gebe deshalb meistens etwas mehr Platz – im Beispiel von nubi007 würde ich z.B den wrapper auf 970px setzen damit alles passt.
Aber das ist ja nicht die Lösung und aus Anregung habe ich das Beispiel mal in einer fiddle nachgebaut: https://jsfiddle.net/540nk55g/ (ist nicht flexbox wie von MrMurphy vorgeschlagen, verstehe dass flexbox dazu gut ist)
... und bin auf ein "interessantes Phänomen gestoßen" : wenn ich im HTML alles gequetscht schreibe (ohne Zeilenumbruch zwischen den einzelnen div’s) passt es, aber mit tidy-HTML passt es nicht mehr.

Kann das jemand vielleicht mal erklären? Fehlt wahrscheinlich etwas im CSS.

[cloned]

Dieses Phänomen tritt auf weil du inline-block verwendest. Es gibt nämlich einen Unterschied zwischen inline-block und block, verwendest du inline-block dann werden auch, vereinfacht gesagt, Textliche Steuerzeichen (wie dein Enter) mit interpretiert. Wenn du möchtest dass das nicht passiert musst du deine divs floaten.

.wrapper div{float:left}

Das reicht für dein Beispiel mal aus, bei einem "realen" Projekt sollte man natürlich noch clearen.

[etux]

Zitat von Toro

... mathematisch gesehen die Sachen oft nicht so ganz passen.

Doch, es passt schon, aber Du vergisst eine Komponente dazu zu addieren.
Inline-Boxen verhalten sich wie die Wörter in einer Zeile: zwischen zwei Wörtern beträgt der Abstand 2 x 0.25em.
Bei Dir wären das insgesamt 2 x 2 x 0.25em = 1em
Wenn die Elementen (Spalten) bündig zu einander liegen und die gesamte Breite vom Wrapper ausfüllen sollen, ist „display: inline-block;“ nicht die beste Lösung.
Ansonsten kannst Du:
- den Leerraum zwischen den Elementen auskommentieren
oder
- beim Wrapper ein „white-space: nowrap;“ (bei den Elementen selbst muss Du es aber rückgängig machen, sonst bricht der Text in den Elementen nicht um „white-space: normal;“)
oder
- Du gibst beispielsweise dem mittleren Element ein „margin: 0 -0.5em;“

„display: inline-block;“ wäre interessanter, wenn die Elementen genügend Abstand zu einander oder keine Breite haben.
Dann kannst Du sie wie ein Text formatieren: „text-align: center | justify | left | right“.
„justify“ ist sehr interessant, da die Elementen links und rechts bündig mit den horizontalen Außenkanten des umgebenden Elementen liegen und die innere Elemente gleichmäßig dazwischen verteilt werden. Es bedarf allerdings einen „Trick“ damit es funktioniert.
Den „Trick“ habe ich schon mal hier im Forum beschrieben, finde ich aber gerade nicht.

Nachtrag:
Habe gerade auf meinem Test-Server entdeckt:
tests.emil-webdesign.net/Inhaltselementen-in-zwei-Spalten/

Wozu ich die Test erstellt habe, kann mich aber nicht mehr erinnern

.

[Toro]

Danke @ cloned und etux. Euro Antworten auf das "interessante Phänomen" sind gut verständlich und machen Sinn.

Dass inline-Boxen sich wie Wörter mit einem space verhalten habe ich noch nicht gewusst, ist aber auch in meiner Beispiel-fiddle sichtbar im unterem wrapper. Da hatte ich auch mit negativen margin versucht es zu korrigieren – geht natürlich, hab ich dann aber wieder gelöscht.

"white-space: nowrap" hab schon öfters mal gesehen und hab mich immer gefragt was soll der Sch... - jetzt versteh ich’s. Gute Sache.

Emil, danke für deine Beipielseite (testseite). Hab im Quelltext ".element:nth-child(odd) { clear: left; }" gefunden. An so etwas auch noch nicht gedacht.

Tja man lernt nie aus

[etux]

Bitte, gern.
Cloned und ich, wir haben das Thema nur angerissen. Das Inline-Formatierungsmodel ist ein sehr spannendes Thema. Vielleicht am Anfang etwas langweilig, aber wenn man einmal drin ist – sehr interessant und sehr nützlich. Schön dass Du Lust zum Lernen hast. Viel Erfolg dabei.