Mehrspaltiges Layout: Es könnte so einfach sein
Oft wird bei der Gestaltung einer Webseite ein mehrspaltiges Seitenlayout angestrebt, bei dem sich die Länge aller Spalten automatisch nach der Spalte mit dem meisten Inhalt richtet. Die Umsetzung dieses Wunsches mit CSS ist etwas knifflig, mit float und absoluter Positionierung stösst man schnell an seine Grenzen. Daher werden zur Spaltenbildung teilweise noch immer Tabellen eingesetzt, die sich weitgehend ihrem Inhalt anpassen.
Dabei besitzt CSS mit den table-Werten der display-Eigenschaft die Möglichkeit, jedem HTML-Element bezüglich der Darstellung Tabelleneigenschaften zuzuordnen. So kann eine semantisch korrekte Seite aufgebaut werden, die sich trotzdem wie eine mit Tabellenlayout erstellte Seite verhält.
Der Quelltext für ein simples dreispaltiges Layout nach dieser Methode kommt ganz ohne float und absolute Positionierung aus:#rahmen
{
display:table;
width:100%;
}
#rahmen div
{
display:table-cell;
}
#menu, #news
{
width:7em;
}
<div id="rahmen">
<div id="menu">Links</div>
<div id="main">Mitte</div>
<div id="news">Rechts</div>
</div>
Dummerweise hat die Sache einen gewaltigen Haken: Der weit verbreitete Browser aus Redmond unterstützt auch in seiner neusten Version im Gegensatz zu allen anderen aktuellen Browsern die notwendigen Werte für display nicht. Somit scheitert ein einfaches Layouten mit CSS einmal mehr nicht an den Unzulänglichkeiten der Spezifikation, sondern an der Unfähigkeit des Browser-Marktführers.
Es könnte so einfach sein ...