mwz: Tabelle mit dynamischer Anzahl Zellen via CSS lösen

Ich habe ein DIV von 900px Breite.

Nun soll innerhalb dieses DIVs ein grafischer Menubalken entstehen. Ich habe:

Grafischer begrenzer Links mit 4px Breite [BL]
Grafischer Begrenzer Rechts mit 4px Breite [BR]
Grafischer Trenner mit 1px Breite [TR]
Grafischer Hintergrund mit 1px Breite (repetierbar) [BUTTON]

Das Ganze soll so aussehen:

[BL][BUTTON][TR][BUTTON][TR][BUTTON].....[BUTTON[BR]

Die Anzahl Menupunkte [BUTTON] ist dynamisch - also muss ich die Breite der jeweiligen [BUTTON]s dynamisch an die Menge der Menupunkte anpassen.

Bisher habe ich das immer mit einer Tabelle und 100% Breite im DIV gelöst - aber das müsste doch auch anders gehen.

Getestet habe ich bereits

Äusserstes DIV:
#menubereich {
 top:48px;
 left:0px;
 width:920px;
 height:30px;
 position:absolute;
 display:table;
}
Inneres DIV1:
#mainmenu {
 display:table-row;
}
Dann der Inhalt:
#mainmenu-left {
 background-image:url(blabla);
 width:4px;
 height:30px;
 display:table-cell;
}
#mainmenu-text {
 background-image:url(blabla);
 background-repeat:repeat-x;
 height:30px;
 padding-top:6px;
 padding-left:8px;
 padding-right:8px;
 display:table-cell;
 text-align:center;
}
#mainmenu-trenner {
 background-image:url(blabla);
 width:1px;
 height:30px;
 display:table-cell;
}
#mainmenu-right {
 background-image:url(blabla);
 width:4px;
 height:30px;
 display:table-cell;
}

Das sieht im Firefox genau so aus, wie ich es möchte - aber im IE funktioniert gar nix. Wenn ich bei den Elementen ergänze(im Netz gefunden):

margin-bottom: -10000px!;
    padding-bottom: 10000px!;
        float:left!;
        height:100%!;

Sieht es im IE zumindest so aus wie es sollte (Firefox ändert nix, wegen dem (!), aber der Menubar geht nicht über die vollen 920px sondern die Button Elemente sind nur so breit wie der Text drinn.

Da ich mich mit CSS noch nicht soooo gut auskenne weiss ich im Moment nicht, was es sonst noch an Lösungen für das Problem gibt - es sollte in allen aktuellen Browsern funktionieren, da es eine öffentliche Seite wird.

  1. Bisher habe ich das immer mit einer Tabelle und 100% Breite im DIV gelöst - aber das müsste doch auch anders gehen.

    Nur wenn du dich von der Vorstellung lösen kannst, dass deine Unbekannt vielen Elemente sich über eine Distanz symmetrisch erstrecken.

    Sofern du dich davon lösen kannst, dürfte es mit float gehen.
    Eine diesbezügliche Distanzierung von deiner Fixierung würde dir auch eine Option auf dynamische Breite des Viewports freilassen.

    mfg Beat

    --
                     /|
      <°)))o><      / |    /|
                ---- _|___/ |     ><o(((°>
               OvVVvO    __ |         ><o(((°>
    <°)))o><  /v    v\/  |
     <°)))o>< ^    ^/_/_         ><o(((°>
               ^^^^/___/
    ><o(((°>    ----       ><o(((°>
       <°)))o><                      ><o(((°>o
    Fehler
    Das Format Ihres Postings scheint unsauber zu sein (z. B. keine Zeilenumbrüche, keine Satzzeichen, alles klein geschrieben oder ähnliches). Solche Postings sind ungern gesehen, da sie oft schwer zu lesen sind. Sind Sie sicher, dass Sie so posten möchten?