nicht angemeldet
Da kommt man leider nicht um Tabellen herum, da die besondere Eigenschaften haben. Sollte ich Falsch liegen und jemand hat eine Lösung ohne Tables, würd ich das gerne sehen.
Du machst also einen DIV mit 80%
In den div packst du Tabellen, dies sind dann die objekte die floaten, dienen also nur als Container. Bei jeder Tabelle setzt du display:inline, damit sie nicht umbrechen.
In der Zelle kannst du dann einen div-Container machen, der wiederum mit display:block definiert wird, damit du darin normal Blockelemente erzeugen kannst.
<div style='width:80%; border:1px solid black;' align='center'>
<table style='display:inline; text-align:center;'><tr>
<td style='border:1px solid black;'>
<div style='display:block; width:100px; height:100px;'>text</div>
</td></tr></table>
<table style='display:inline; text-align:center;'><tr>
<td style='border:1px solid black;'>
<div style='display:block; width:100px; height:100px;'>text</div>
</td></tr></table>
<table style='display:inline; text-align:center;'><tr>
<td style='border:1px solid black;'>
<div style='display:block; width:100px; height:100px;'>text</div>
</td></tr></table>
<table style='display:inline; text-align:center;'><tr>
<td style='border:1px solid black;'>
<div style='display:block; width:100px; height:100px;'>text</div>
</td></tr></table>
<table style='display:inline; text-align:center;'><tr>
<td style='border:1px solid black;'>
<div style='display:block; width:100px; height:100px;'>text</div>
</td></tr></table>
</div>
Dieser Code ist absolut grässlich. Aber er funktionniert.
Ich würde mir überlegen, ob es denn so wichtig ist, dass die Elemente nach dem floaten noch zentriert sind. Denn wenn nicht, geht es sehr einfach.