CSS Gridlayout - Unterschied zwischen Chromium und Firefox

[Speedy.]

Hallo zusammen,

für eine Webseite verwende ich ein dynamisches Gridsystem auf Basis von %-Werten (selbst geschrieben, kein Bootstrap oder ähnliches). Wenn ich nun drei Spalten realisieren möchte, mach ich das:

.span4 {
    width: 30%;
    margin: 0 1.25%;
    float: left;
}

.content {
    overflow: hidden;
}

<div class="content">
	<section class="span4">
		<h2>Spalte 1</h2>
	</section>
	<section class="span4">
		<h2>Spalte 2</h2>
	</section>
	<section class="span4">
		<h2>Spalte 3</h2>
	</section>
</div>

Im Chromium sieht das dann leider so wie im Anhang aus, im Firefox sind aber alle Spalten schön nebeneinander. In den Entwicklerwerkzeugen konnte ich keinerlei Margins oder Paddings ausmachen, die das verursachen. Das betrifft aber alle Spaltengrößen, nicht nur span4. Hat da jemand eine Idee?

PS: Als Unterbau wird normalize.css verwendet...

 

[Spike S.]

Mit deinen Codeschnipseln und normalize.css kann ich das im Chrome (Win7) nicht nachvollziehen, alles auf einer Linie nebeneinander. Irgendwas muss da noch dazwischen funken, was von anderer Stelle dorthin durchvererbt wird. Es ist nicht nur margin und padding dabei ein Thema, z.B. Breiten- und Höhenangaben, sowie "display" Einstellungen haben darauf auch Einfluss.
Wenn du nix finden kannst, könnte man das entweder mit vertical-align oder ein in der Höhe beschränktes umschließendes Element in die Richtung zwingen. Aber besser ist immer erstmal auszuschließen, dass eine Fehldefinition verantwortlich ist.