Layer (CSS) contra Tabellen (HTML)

[Kinast]

Hallo,

nun habe ich den Schritt "auch gewagt" - und habe mein Design, welches aus 4 Tabellen besteht, eine dabei relativ komplex, versucht, durch mit CSS positionierte Div's ("Layer") und derengleichen sie zu ersetzen. Das meiste funktioniert auch ganz schön, doch irgendwie können div's nicht das, was td's können. Doch dazu später. Hier erst mal die Tabelle, über die ich stolper:

+--------+-----------------------+---------+
|  [nix] |        [colspan=2] Text rechts  |
+--------+-----------------------+---------+
|        |                       |         |
| Navi   | Hauptseitentext       |  Navi   |
| Links  |                       |  Rechts |
|        |                       |         |
+--------+-----------------------+---------+
|  [nix] |         [colspan=2] Text rechts |
+--------+---------------------------------+

An sich kein Problem. Da meine Seite einen bläulichen hintergrund mit einem Verlauf links und rechts hat, ist in den [nix]-Td's nur der Hintergrund halt. Das ganze geht auch ganz gut, alles prima.

Nur mit <div>'s hat man da seine Schwierigkeiten. Die Navigationsleisten links und rechts hinzubekommen, habe ganz gut hinbekommen (http://glish.com/css/7.asp). Doch erstens muss ich sie vertikal absolut positionieren, was ich nicht will, da sie -wie vorher- da anfangen sollen, wo der Hauptseitentext anfängt, und zweitens bekomme ich sie nicht auf die Hohe der Hauptseitentext-<div>.

Tja, da sind wir schon bei den Dingen, die ein <td> gegenüber einem <div> kann. Das vormuliere ich jetzt mal absichtlich so, damit deutlich wird, dass es tatsächlich an den Elementen liegt (was doch zu heutigen zeiten schon zu wünschen übrig lässt). Also, da wäre erst mal das vertikale zentrieren. Man nehme ein <div>, setzte es height: 200px; und dann noch vertical-align: middle;. Weder Opera5,7, noch IE5,5.5,6, noch NS4,6 machen es - im Gegensatz zu einem <td>, auf welches meine gerade genannten CSS-Definitionen das gewünschte Ergebnis bringen würden.
Dann wäre da z.B. noch, ...ehmm, ein beispiel:
<div style="height: 123px; padding: 0px 30px;"">
  <div style="height: 100%; position:absolute; left:0;top:0;width: 30px;">Soll so hoch sein wie</div>
  diese
  <div style="height: 100%; position:absolute; left:0;top:0;width: 30px;">div</div>
</div>
Das ist das allerbilligste Beispiel einer
<table>
 <tr>
  <td>linke navi</td>
  <td>Text</td>
  <td>rechte navi</td>
 </tr>
</table>
Konstruktion, mit einem völlig anderen Ergebnis. Wenn nun der Hintergrund der linken Navigation rot sein soll, der des Haupttextes Grün, und der der rechten Navigation blau, dann funktioniert das nicht mit <div>'s - also, nichts da mit schöne neue CSS-welt, und wer seine Seite noch mit Tabellen formatiert, ist selbst dran schuld...

euer Kinast

PS: Ich freue mich sehr über Hilfe. Ich hätte nämlich gerne eine tabellenlose seite, und z.B. ein druckcss lässt sich durch das display:none;-machen auf alle Navigationselemente (die ich bei mir sinnvollerweise mit #Logobar, #topbar, #toppane, #leftpane, #rightpane, #endbar, #footer benannt habe) ganz einfach realisieren.