Raster - Spaltenlayout und Margin?

[Liv3pl4y]

Hallo zusammen,

folgendes Problem: Ich verwende für mein Design (beziehungsweise dem Prototyp) ein 12-Spaltiges Rasterlayout, jeweils in Prozentwerten mit dem Ausgangswert von 960px, sowohl für eine 80% Zeile (layoutFluid), als auch für eine 100% Varianten (layoutRow).

Nun habe ich eine Section, in welcher sich wiederum drei Artikel befinden, normalerweise sollten diese normal umbrechen, wenn ich das Browserfenster kleiner ziehe. Dem ist aber nicht der Fall, ich denke es liegt an der max-width: 32% Deklaration für die Artikel Elemente, wenn ich aber diese Wert nicht verwende, dann werden komischerweise die Artikel-Elemente nicht richtig zentriert. Diese haften dann weiter am linken Rand, als das diese zentriert werden. Ich werde daraus nicht schlau.

Ich habe euch mal zwei Links zu Pastebin mit dem HTML Dokument und der Stylesheets angehängt, vielleicht erkennt ihr meinen Fehler besser, als ich. Ich verzichte mal darauf, auch die reset.css (normalize) anzuhängen, da das Problem auch ohne diese zu reproduzieren ist.

Pastebin-Link (HTML Dokument):
Pastebin-Link (Stylesheet):

Ich danke, euch schon mal für eure Aufmerksamkeit und hoffe auf eine Lösungsmöglichkeit, ich sitze zugegeben schon seit 2-Tagen an dem Problem (^^).

 

[skiron]

Die Artikel werden bei mir im Opera überhaupt nicht zentriert. Die ersten beiden sind linksbündig nebeneinander, der dritte darunter. Auch bei kleinem Fenster (Meine Auflösung 1680x1050)

Ich steig bei Deinen mehrfach-Klassen nicht wirklich durch bzw habe wenig Lust mich da durchzuwühlen.
Ich empfehle Dir aber Folgendes:
- separiere den Bereich der Probleme macht in eine neue html-Datei und bearbeite dort das Problem. Das ist übersichtlicher und Du kannst leichter feststellen ob sich der Fehler innerhalb dieses Bereiches oder im restlichen Quelltext versteckt
- verwende das Flex-Modell statt float!
- zur Problemlösung würde ich padding und margin in Extra-Klassen packen. Kommt auf 2 mehr dann auch nicht mehr an.

Klar ist für mich, dass Du mit 32% drüber bist da ja noch Platz zwischen den Boxen ist (border? padding? margins?) und der verbraucht mehr als die restlichen 4%
Und mit der Klasse "four-columns" setzt Du 33,3333%. Das widerspricht der Angabe von 32% in #main-content-tabs article.