Tipps und Tricks: Mehrspaltiges Layout ohne Tabellen
Tabellen zum Layouten der Seite soll ja out sein. Aber wie erstellt man nun ein Layout mit mehreren Spalten ohne Tabellen? So:
,
,
,
,
<style type="text/css">
div
{
font-size:12px;font-family:Verdana;
border:1px solid #000000;background-color:#efefef;
height:50%;
float:left;
}
</style>
<title>Mehrspaltiges Layout ohne Tabellen</title>
</head>
<body>
<div style="width:18%;">Blasebalg </div>
<div style="width:58%;margin:0px 1%;">Blasebalg </div>
<div style="width:18%;">Blasebalg </div>
<p style="clear:left;">Irgendein Text ohne Spaltenlayout</p>
In dem <style>-Bereich werden zunächst einige allgemeine Formatierungen für das <div>-Tag festgelegt. Interessant ist hier float:left;. Die float-Eigenschaft legt für ein Element fest, dass es von anderen sozusagen umflossen werden soll. Der Wert left plaziert das Element links. Nachfolgende Elemente werden rechts plaziert und nicht unterhalb.
In diesem Fall bedeutet das, dass mehrere <div>-Bereiche nebeneinander plaziert werden.
Überschreitet ihre Gesammtbreite 100%, fügt der Browser einen Zeilenumbruch ein.
Aus diesem Grund ist in dem Beispiel oben die Summe der Boxbreiten kleiner als 100% (siehe auch Boxmodell)
und der nachfolgende Text beginnt in der nächsten Zeile.
Hier findest du weitere Informationen zu:
background-image
Browser
Browser, wie der Netscape 4.x, unterstützen diese Technik nicht und zeigen nur ein Durcheinander des Inhalts an. Du solltest diese Browser mit einer Browserweiche umleiten.