CSS zur Positionierung - Mein Fehlschlag?

1 MarkusWi

Hallo alle zusammen,
auf meiner Webseite https://naturalstone.ch/ habe ich für die 8 Tätigkeitsfelder 8 Boxen mit Kurzbeschreibungen gemacht.

Eigentlich wäre meine Idee, dass die 8 Boxen alle fortlaufend erscheinen. Aber aus einem mir noch nicht verständlichen Grund ist die Box "Brunnen" separat auf einer Zeile.

Warum rutscht die Brunnen nicht nach links und die Mauersteine und Bodenplatten kommen eine Zeile höher hinter die Brunnen?
Und die Zäune und Kastanienholz bilden dann die letzte Zeile?

Was habe ich falsch gemacht?
Danke für jeden Hinweis, welcher zur Eliminierung meines Fehlers führen.

Viele liebe Grüsse

2 Jörg Kruse

Das liegt wohl daran, dass die Boxen mit float aneinandergereiht werden und die Boxen unterschiedlich hoch sind. float ist eigentlich nur für das Umfließen von Inline-Elementen gut geeignet, für die Aneinanderreihung von Blockelementen empfiehlt sich eine Flexbox.

3 MarkusWi

Wow, Super vielen mega Dank. Das war genau der Hinweis welcher zur perfekten Darstellung geführt hat. Und das an einem Sonntag. Wow, ich bin begeistert. Danke vielmals.

... 1 Monat später ...

4 MarkusWi

Guten Morgen,
ich war ja total begeister von Deiner Lösung auf meiner Seite https://NatruralStone.ch . Sie hatte genau gemacht, was ich beabsichtigt hatte. Somit legte ich mich beruhigt schlafen...

Doch dann war ich auf einem Anderen Computer, und was muss ich da sehen? Die Boxen sind jetzt ALLE untereinander. Nicht mal die ersten beiden sind nebeneinander.
Hyperfentilierend rannte ich zu dem Computer an welchem ich das getestet hatte. Und da sind alle sauber NEBENEINANDER.
Ok, ein Reboot tut immer goot... Cash leeren, ein Tag warten...
Aber noch immer, je nach Computer unterschiedliche Darstellung...

Hier die falsche / ungewünschte Darstellung

Und hier die gewünschte Darstellung

Was mache ich falsch? Warum ist das auf zwei unterschiedlichen Computer anders?

Vielen lieben Dank für Nervenberuhigende Antworten.
Gruss Markus

5 Jörg Kruse

Sie hatte genau gemacht, was ich beabsichtigt hatte.

In welchem Browser, Internet Explorer?

Eine Zusammenfassung "display: wrap" gibt es im Standard-CSS nicht. So sollte es funktionieren:

div.mnuProdukte {
  display: flex;
  flex-wrap: wrap;
  max-width: 850px;
}

6 MarkusWi

Hui, aber Hallo, "Jörg der Zurückbringer der Glücksgefühle!"
Sag, Du bist ja extrem schnell, hast Du keine Angst vor einem BurnOut? Wenn Du einen Platz zur Entspannung brauchst, bist Du bei mir im Tessin herzlichst eingeladen zu einem DeTox Aufenthalt...

Vielen lieben Dank
Gruss Markus

7 Jörg Kruse

Du hast das Posting zum richtigem Zeitpunkt abgesetzt :) Ich erhalte bei neuen Beiträgen eine Benachrichtigung. Da ich in dem Moment nicht mit etwas wichtigerem beschäftigt war und es sich um eine einfachere Frage gehandelt hat, habe ich diese gleich beantwortet.

nach oben

CSS zur Positionierung - Mein Fehlschlag?

Beitrag schreiben (als Gast)