float: Ausrichtung von Blockbereichen oder doch Tabelle?

[Christian]

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

[suit]

Ich könnte jetzt zwar mit padding-left/right, den Mittel-DIV auf die richtige Größe bringen, aber ist das so in Ordnung?

ja, ich denke dass das so in ordnung geht

ich würde allerdings die beiden "links" und "rechts" elemente (übrigens blöde namen, auch wenns nur ein test ist) als kinder des mittleren elements auszeichnen und diese aus seinem elternelement rausschieben (negativer margin) und dem mitterlen element einen entsprechenden aussenabstand verpassen

das versteht zwar der ie6 nicht (wenn ich das jetzt richtig im kopf hab) aber nutzer dieses browsers bekommen einfach eine feste breite - pech gehabt

Oder wie sieht das aus wenn ich doch eine Tabelle nehme?

um des fliegenden spaghettimosters will nicht

[molily]

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.

Ja, das ist standardmäßig immer so, wenn ein Element an einem float »vorbeiläuft«. Man nutzt üblicherweise margin oder overflow, damit dies nicht der Fall ist.
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#mehrspaltigkeit-mit-float

Mathias

[Christian]

Man nutzt üblicherweise margin oder overflow, damit dies nicht der Fall ist.
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#mehrspaltigkeit-mit-float

Vielen Dank für den Artikel, war sehr interessant. Ich habe mich jetzt entschieden overflow:hidden zu benutzen, ich denke, dass es damit eine gute Lösung ist.

Gruß Christian