5-Spalten-Layout

[Mercator]

Hallo,

ich habe eine knifflige Sache, bei der ich nicht weiterkomme und hoffe auf Rat von Euch:

Ich will mit CSS (ohne Tabellen) ein 5-spaltiges Layout umsetzen. Dabei sind die mittleren drei Spalten von der Breite fest definiert (z.B. 200px, 400px, 200px).

Das Problem: Die beiden äußeren Spalten sollen sich flexibel an den restlichen verfügbaren Platz (Breite) anpassen. Das Ganze soll noch möglichst übersichtlich zu realisieren sein und im IE und FF funktionieren.

Ich hatte es hiermit schon mal versucht, dabei skalieren die Außenspalten aber nur nach dem Inhalt, nicht aber nach der verfügbaren Breite:
<div style="width:auto; float:left; background:#eee; padding:10px; border:1px dotted #000; height:135px;">Spalte 1</div>
<div style="width:200px; float:left; background:#eee; padding:10px; border:1px dotted #000; height:135px;">Spalte 2</div>
<div style="width:380px; float:left; background:#eee; padding:10px; border:1px dotted #000; height:135px;">Spalte 3</div>
<div style="width:200px; float:left; background:#eee; padding:10px; border:1px dotted #000; height:135px;">Spalte 4</div>
<div style="width:auto; float:left; background:#eee; padding:10px; border:1px dotted #000; height:135px;">Spalte 5</div>

Alte Spalten sollten gleich hoch sein - aber das dürfte in diesem Zusammenhang eher nebensächlich sein.

Wer hat eine gute Idee, wie ich das mit den äußeren Spalten hinbekomme?


Danke
Andi

 

[brainshock]

1. Gleiche Höhe geht nicht. CSS arbeitet mit Boxen und nicht mit Spalten.
2. http://forum.jswelt.de/showthread.php?t=26808
3. Ich denke nicht, dass es möglich ist - wie sollten die beiden äußeren Boxen sich "absprechen"?

 

[Albu]

Das Problem kann man Verallgemeinern auf zwei dreispalten Layouts, wobei das zweite in der mittleren Spalte des ersten platziert wird. Was Du also suchst ist eine Lösung für ein Drei-Spalten-Layout (bzw. zwei, wobei das innere trivial ist).

Da sich dieser Thread aber um 5-Spalten Layouts dreht, wäre eine Diskussion über Drei-Spalten-Layouts OT

 

[dkdenz]

Schließe mich meinem 'Vorredener' an.
Im Prinzip brauchst Du nur ein 3-Spalten-Layout:
http://intensivstation.ch/files/templates/2/template-3.html

 

[brainshock]

Aber das dreispaltige Layout löst sein Problem ja auch nicht. Die äußeren Spalten passen sich nicht automatisch dem restlichen Platz an.

 

[dkdenz]

Natürlich nehmen die beiden äußeren Ränder den restlichen Platz ein.
Die drei mittleren sollen ja eine fixe Breite haben.

 

[brainshock]

Entweder ich verstehe etwas falsch oder ich habe schon Wochenende... Also nehmen wir an, dass bei deinem Link das DIV content 500px breit ist und die beiden aüßeren (left und right) nicht absolut definiert sind. Wie bekommt man die äußeren DIVs dazu,
1. die gleiche Größe zu haben und
2. den restlichen Platz einzunehmen?

 

[dkdenz]

Ich verstehe es jetzt auch nicht mehr... :whacky:
Ich habe mich nach der Frage gerichtet,
nämlich das die drei 'mittleren Spalten' eine fixe Breite haben sollen.

Dabei sind die mittleren drei Spalten von der Breite fest definiert (z.B. 200px, 400px, 200px).

Und genau das setzt das Template um.
Oder habe ich jetzt einen Denkfehler drinne?

 

[brainshock]

Und um diese "Spalten" sollen links und rechts nochmal 2 "Spalten" sein. Diese sind in der Breite variabel und passen sich dem Rest der verfügbaren Breite an.

 

[dkdenz]

Yes.
Es wäre nur mal interessant zu wissen,
ob der Urheber dieses Threads in die beiden äußeren 'Behältnisse' irgendwas drinnen haben will...