kein background bei tabellenartiger DIV/CSS kombination

[Max-Julan Pogner]

Hi!

folgendes hat nun mit mir drei nicht ganz-dummies das gehirnschmalz gekostet. eventuell findet das geplagte hirn hier eine lösung :)

DAS ZIEL (dem ideal folgend)

• zeilen werden dynamisch generiert. mit unterschiedlicher anzahl von spalten.
• jede zeile hat eine maximalbreite den einzelnen zellen wird auch eine breite
    zugeordnet. in summe passt es exakt zusammen.
• die breite einer zelle der einen zeile hat nichts mit der breite der zellen
    einer anderen zeile zu tun.
• jede zeile soll abwechselnd hell und dunkel sein.

beispiel:

| cell 11 | cell 12| cell 13 |   (bg:gray)
|    cell 21    |   cell 22  |   (bg:silver)
|          cell 31           |   (bg:gray)
|c41|c42| c43|     cell 44   |   (bg:silver)

DER BROWSER

• Ich selbst benutze FF 2.0.0.3 da gehts nicht. wenn nicht anders gesagt, meine ich die effekte/auswirkungen unter FF 2.0.0.3
• In Opera 9.20 hat es mit dem table-free versuch den gewünschten effekt.
• IE kann ich mangels linux-fähiger version nicht testen.

BESTER TABLE-FREE VERSUCH (kläglich)

<div style="background:blue; width:300px;">
  <div style="float:right;width:200px;">
    first right<br/>
  </div>
  <div style="float:left;width:100px;">
    FIRST LINE LEFT<br> FIRST LINE LEFT
  </div>
</div>
<div style="background:blue; width:300px; clear:both;">
  <div style="float:left; width:150px;">
    SECOND LINE LEFT
  </div>
  <div style="float:right; width:150px;">
    second right<br> second right
  </div>
</div>

PER TABLE WÜRDE ES GEHEN (stark hinkend)

<div style="background:silver; width:300px; display:table-row;">
  <div style="float:right;width:200px; display:table-cell;">
    first right<br/>
  </div>
  <div style="float:left;width:100px; display:table-cell;">
    FIRST LINE LEFT<br> FIRST LINE LEFT
  </div>
</div>
<div style="background:gray; width:300px; clear:both; display:table-row;">
  <div style="float:left; width:150px; display:table-cell;">
    SECOND LINE LEFT
  </div>
  <div style="float:right; width:150px; display:table-cell;">
    second right<br> second right
  </div>
</div>

Nachteil: ein style="margin-top:2ex;" der zeilen-DIVs (oder sonstiges margin-top) wird nicht beachtet.
außerdem hinkt diese variante etwas.

DIE FRAGE

über trial&error haben wir nun rausgefunden, dass bei float:right zumindest die anordnung der zellen gemäß dem ziel stattfinden.
der zeilen-hintergrund ist aber immer noch nicht sichtbar.
denn die umschließenden DIVs verkümmern zu zero-height container.

was tun um den hintergrund zu bekommen, nicht auf die flexiblen breiten der zellen zu verzichten, aber auch keine stümperhafte pseudo-table über display:table zu verwenden?

FURCHTLOSES

einiges haben wir schon probiert.
so zum beispiel viele kombinationen mit float:left.
unerklärlicher weise stimmt dann nichtmal die anordnung der zellen,
bzw fließt der text falsch um zellen herum, anstatt rechteckig zu bleiben.

wenn die border (zwecks anschaun) eingestellt ist, gehen sich die zellen einer zeile natürlich knapp nicht aus. :)

vielen dank an alle, die bis hierher durchgelesen haben!

und überschwängliche, fast erdrückende, freude all jenen, welche einen
sachdienlichen hinweis zur problematik zum besten geben kann!

Max-Julian Pogner