Responsiv: 3 Boxen nebeneinander - Breitenproblem
 

Hallo Gemeinde,
ich versuche mich derzeit an meinem zweiten Responsive-Projekt. Ich hänge gerade an einem Problem, was eigentlich relativ simpel erscheint, mir aber doch ziemliches Kopfzerbrechen beschert. Ich habe hier einen Testcase vorbereitet:

Testcase

Es geht eigentlich nur darum unten die Boxen in nebeneinander in einer Reihe darstellen zu lassen. Dabei sieht man das Problem, dass die Boxen nicht ganz bis zum Rand der Webseite gehen.

Der Container hat ja eine max-width von 1200px. Meine Rechnung ist diese:

1200
- 2 x 20px padding = 1160
- 3 x 356px Bilder = 92
- 2x Bildabstand von 46px = 0

So habe ich zumindest geplant. Ich habe schon gesehen, dass das Problem wohl darin besteht, dass die Boxen zusammengeschoben werden. Die Bilder sind zumindest skaliert und nicht auf den vollen 356px. Es muss an den Prozentwerten liegen (sind aber korrekt umgerechnet), verwende ich nämlich fest Pixelwerte mit einem float: right für die letzte Box in der Reihe funktioniert es.

Kann mir bitte jemand einen Tipp geben wo mein Fehler liegt.

Besten Dank,
Chop

Die Summe ergibt 96,66676%. Es fehlen also 3,33324%.

EDIT: wenns mit dem rechnen nicht so klappt, nimm 30% für section + 5% margin-right :mrgreen:

Hallo Manfred,
shitte - ja du hast natürlich recht, ich erkläre nur mal kurz meinen Denkfehler

http://riamoden.de/testcase/images/screen.jpg

Das ist meine Photoshop Vorlage. Ich habe als Ausgangswert die 1200px genommen, hätte aber die 1160px nehmen müssen. Ich habe die Prozentwerte falsch umgerechnet.

Sorry für diesen sinnlosen Threat, aber manchmal sieht man den Wald vor lauter Bäumen nicht.....