• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit float und padding

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.
 

Anhänge

  • Archiv.zip
    1,3 KB · Aufrufe: 1
  • Bildschirmfoto 2015-02-02 um 16.34.24.png
    Bildschirmfoto 2015-02-02 um 16.34.24.png
    68,6 KB · Aufrufe: 14
Werbung:
Du musst die Floats auch wieder clearen. Oder erstellst das mit dem Grid-Layout von Bootstrap. Damit würden die Container sogar responsive.
 
Werbung:
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 …
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben