Hallo,
ich habe ein Problem, dass sich mir nicht ganz erschließt.
Kurz zu dem, wo ich hin möchte.
Ich möchte mehrere Bilder auf einem Onepager platzieren und diese mit einzelnen DIVs gliedern.
Zum besseren Verständnis habe ich ein Schema zur Anschauung angehangen.
Die Haupt-DIVs haben graue Verläufe. In ihnen sind Bilder, die ich auf 100%/auto gestellt habe.
In den ersten Reihen klappt alles. Da haben die ersten grauen DIVs eine Breite von zB 33%, dann 50% etc.mit float:left.
Damit man um die Bilder den Verlauf des Haupt-DIVs sieht, hat das Haupt-DIV einen padding-Wert.
Weiter unten habe ich dann in einem grauen DIV mehrere Bilder, die ich eigentlich nach einem ähnlichen Prinzip einbauen wollte. Also ein graues Haupt-DIV mit Padding und darin zB zwei DIVS mit 50% Breite und float:left. Allerdings klappt das scheinbar nicht, wenn mehrere DIVs mit float enthalten sind. Denn dann ist aufeinmal das graue Haupt-DIV nur so hoch wie das Padding. Nehme ich das float raus, sind die beiden Inhalts-DIVs zwar untereinander, aber das Haupt-DIV umschließt beide.
Versteht ihr was ich meine?
Ich habe auch ein kleines Beispiel gebaut, in dem man sieht, wie sich beides, mal mit/ohne padding verhält.
Du musst die Floats auch wieder clearen. Oder erstellst das mit dem Grid-Layout von Bootstrap. Damit würden die Container sogar responsive.
Wie und wo cleare ich die genau?
Verstehe leider immer noch nicht, wo mir das bei meinem Problem hilft.
Habe der Reihe nach überall mal clear eingesetzt, aber es änderte sich irgendwie nichts …
Gib dem grauen Div ein overflow:hidden.
Oder zeige doch mal dein Quelltext HTML/CSS.
hey scbawik, vielen dank, das hat geholfen!
aber ich verstehe nicht ganz, wieso es funktioniert. hätte jetzt gedacht die roten kästen werden abgeschnitten, aber wieso passt sich das graue DIV nun an?