Auch eine interessante Möglichkeit, wie siehts mit cross-browser Problemen aus? Opera zickt bei mir mit margins immer rum, hab sie bei meinen fluid layouts zumindest horizontal immer vermieden
CSS-Fluid-Grid-Layouts: Schluss mit Rechnen


1: Schluss mit Rechnen
Der Calculator fragt die Spalten (Columns), deren Breite und den Abstand zwischen den Boxen ab und liefert das CSS für ein flexibles Grid. Alle Breitenangaben sind in Prozent [caption id="attachment_925" align="alignleft" width="423" caption="Screenshot: Fluid Grid Calculator"]
2: Abstände zur nächsten Box
Alle Boxen erhalten einen linken margin (z.B. margin: 0 0 0 2%). Damit haben aber nun die linken Boxen immer 2% zuviel Abstand links. Doch es folgt die Lösung...3: Und wie klaust Du den überflüssigen Abstand links...
Die Lösung besteht darin, dem gesamten, die floatenden Boxen enthaltenen DIV einen linken, negativen margin zu geben. Der komplette CSS-Code sah dann so aus:
/*
Page container
*/
.wrapper{
max-width:810px;
padding:15px;
margin:0 auto;
}
/*
Column container
*/
.grids{
width:auto;
max-width:840px;
clear:both;
margin:0 0 0 -3.571%;
list-style:none; /* So we can make grids out of lists. */
overflow:hidden; /* Clear the floats */
}
[class^="grid-"]{
float:left;
margin:0 3.571% 0 0;
}
.grids [class^="grid-"]{
margin:0 0 0 3.571%;
}
.grid-1{ width:29.762% }
.grid-2{ width:63.095% }
.grid-3{ width:96.429%; margin:0; }
Eine gute Lösung, der Fluid Grids Calculator, zu finden unter csswizardry.com/fluid-grids.