Guten Morgen,
beim erstellen einer neuen Seite, bin ich über folgendes Problem gestolpert:
Als Test möchte ich eine simple Seitenaufteilung.
-------------------
| HEAD |
-------------------
|LI| MITTE |RE|
| | | |
| | | |
-------------------
| BOTTOM |
-------------------
Wobei die Breite des Mittelbereiches variabel sein soll, die Bereiche links/rechts sind feste Breiten.
Mit einer Tabelle mit 3 Zeilen und 3 Spalten (in der zweiten Zeile) ist das ja ziemlich schnell erledigt, aber so wie ich auch hier im Forum gelesen habe, soll man ja keine Tabellen mehr für soetwas benutzen.
Also habe ich es mit DIVs probiert, nur dass das mit dem Mittelbereich nicht so recht hinhaut. (Es verschiebt sich RIGHT nach unten)
<div id="head"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="bottom"></div>
#head { }
#left { float: left;
width: 150px;
}
#middle {
float: left;
}
#right {
float: right;
width: 150px;
}
#bottom {
clear: both;
}
Dann habe ich die DIVs mal umgestellt (von l-m-r nach l-r-m):
<div id="head"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="bottom"></div>
#head { }
#left { float: left;
width: 150px;
}
#middle { }
#right {
float: right;
width: 150px;
}
#bottom {
clear: both;
}
Jetzt geht das mit der Ausdehnung des Mittelbereiches, allerdings unter-lappt der Mittel-Div jetzt die beiden DIVs left/right. Der Text im Mittel-Div ist aber an der richtigen Stelle.
Ich könnte jetzt zwar mit padding-left/right, den Mittel-DIV auf die richtige Größe bringen, aber ist das so in Ordnung?
Oder wie sieht das aus wenn ich doch eine Tabelle nehme?
Ich habe das ganze mal eben eingestellt zum anschauen:
http://zord.de/divtest.html
(oben 1. DIV Lösung, mitte: 2. DIV, unten: Tabelle)
Bin für jede Anregung dankbar.
Gruß Christian