CSS-Problem mit gridsystem und darunter liegendem Element

Hallo zusammen,

auf meiner Startseite hab ich per Gridsystem 5 Bilder nebeneinander positioniert. Hierbei ergeben sich nun aber zwei Probleme.

1. Die darunter liegende graue Box wird nicht mehr über 100% angezeigt wie es zuvor war
2. Die 5 Bilder sollen alle schön gleichmässig verteilt sein über die Breite. Dabei soll das erste komplett links sein und das Rechte komplett rechts.


Kann mir jemand hierbei helfen? Besonders die ersten zwei Punkte sind sehr wichtig.
Nachfolgend die Daten:
http://www.esobp.de/en/home.html, user: test, pw:beerpong

Viele Grüsse und danke,
David

Kann mir zu diesem Problem jemand Input geben? :)

nach dem Ende des letzen gefloateten Elementes fehlt das Clearing.

Code:

---

<div class="clear"></div>

---

super, danke.
Dann wäre das erste problem ja gelöst. Aber nun stellt sich mir die Frage noch wie ich die 5 Bilder richtig verteilen kann:
1. Bild ganz links
2. letztes Bild ganz rechts
3. Alle Bilder mit dem identischen abstand dazwischen anordnen

Wie kann ich das realisieren?

viele grüsse und danke,
David

Also deine Bilder sind zum ersten ja links angeordnet innerhalb des figure Tags. Der wenige Abstand links am ersten Bild sind die 1% margin aus der Definition:

Code:

---

.mod_article > .block {
    margin-left: 1%;
    margin-right: 1%;
}

---

Das ganz rechte Bild nun völlig nach rechts schieben, da musste wohl mehr anpassen, das müsstest du als erstes rechts anordnen und dann den 1% Abstand margin noch wegnehmen. Aber damit würde das rechte Bild dann einen ziemlich großen Abstand zum vorhergehenden haben. das sieht nicht aus.
Außerdem musste aufpassen, damit das Prozent Grid nicht aus dem Tritt zu bringen.

habe es jetzt so gelöst, dass ich jedem bild ein paar pixel davor mitgegeben habe. jetzt sind die bilder zwar nicht komplett am rande, jedoch sind die gleichmässig verteilt.