Problem mit 3-Spalten-CSS-Layout

[Max Smily]

Hallo CSS-Profis,

Ich versuche mich gerade an meinem ersten 3-Spalten-CSS-Layout.

Das Prinzip an sich hab ich wohl verstanden. In meinem Layout hab ich aber zusätzlich noch eine abschließende Fußzeile mit drin.

Dieser Footer soll von jeder der drei Spalten nach unten verdrängt werden können, je nachdem welcher der drei am längsten ist, damit er nie mit den Inhalten oder dem Menü überlappt.

Dies funktioniert auch gut, wenn alle drei Spalten "relative" positioniert sind.

http://www.tenevista.de/css/index1.html

Problem: Das Haupt-Div "main" treibt nicht auf die verfügbare Breite aus, was ich aber gern so haben möchte.

Wenn ich das "main"-Div absolute positioniere, dann wird die Footerzeile nicht korrekt nach unten verdrängt. (Im IE6 wird zudem das Haupt-Div trotzdem nicht ausgetrieben, wohl aber in Mozilla1.7 und Opera7).

http://www.tenevista.de/css/index2.html

Gibt es eine Lösung, in der sowohl das Hauptdiv auf volle Breite zwischen den zwei Seitenblöcken ausgetrieben wird UND gleichzeitig die Footerzeile in jedem Fall (egal welche Spalte am längsten ist) nach unten verdrängt wird? Oder ist das nur mit umständlichen Workarounds zu schaffen? Wenn ja wie?

Hier noch der Link zur CSS-Datei:

http://www.tenevista.de/css/styles.css

Die zwei Formatierungs-Varianten für "main" stehen in #main1 und #main2.

Vielen Dank für die Hilfe.

Grüße
Max

[Candid Dauth]

Hallo du da draußen,

Gibt es eine Lösung, in der sowohl das Hauptdiv auf volle Breite zwischen den zwei Seitenblöcken ausgetrieben wird UND gleichzeitig die Footerzeile in jedem Fall (egal welche Spalte am längsten ist) nach unten verdrängt wird? Oder ist das nur mit umständlichen Workarounds zu schaffen? Wenn ja wie?

Du könntest einen Container anlegen, den du absolut positionierst, und in dem dein »Hauptdiv« und dein »Footerzeile« sind. Die sind dann nicht absolut positioniert, womit die Footerzeile nach unten rutscht. Ich hoffe, du verstehst, was ich meine.

Abgesehen davon gefällt mir dein Layout sehr gut. ;-)

Grüße von hier drinnen, aus Biberach an der Riss,
Candid Dauth (Dogfish)

[Candid Dauth]

Hallo du da draußen,

Du könntest einen Container anlegen, den du absolut positionierst, und in dem dein »Hauptdiv« und dein »Footerzeile« sind. Die sind dann nicht absolut positioniert, womit die Footerzeile nach unten rutscht. Ich hoffe, du verstehst, was ich meine.

Du könntest natürlich auch einfach -- statt des Hauptidvs und der Footerzeile -- die Navigationen absolut positionieren. Das wäre natürlich noch einfacher.

Grüße von hier drinnen, aus Biberach an der Riss,
Candid Dauth (Dogfish)

[Ingo Turski]

Hi,

Dies funktioniert auch gut, wenn alle drei Spalten "relative" positioniert sind.

wieso beläßt Du es nicht bei static?

Problem: Das Haupt-Div "main" treibt nicht auf die verfügbare Breite aus, was ich aber gern so haben möchte.

Du brauchst dein #main1-DIV weder relative positionieren, noch floaten zu lassen. Setze es im Quelltext als letztes Element und definiere seitliche margins.

Übigens:
         width: 100% - 24px;
lustiger Versuch. CSS ist keine Programmiersprache. :-)

freundliche Grüße
Ingo

[MudGuard]

Hi,

width: 100% - 24px;
lustiger Versuch. CSS ist keine Programmiersprache. :-)

eine sehr umständliche Methode, width auf auto zu setzen (falls es für die betroffenen Elemente nicht noch gültige Angaben unter anderen Selektoren gibt)

cu,
Andreas

[Max Smily]

Hi Ingo,

Du brauchst dein #main1-DIV weder relative positionieren, noch floaten zu lassen. Setze es im Quelltext als letztes Element und definiere seitliche margins.

Jawohl! Das war des Rätsels Lösung! Danke. Da hab ich solange rumprobiet und dann ist es sooo einfach.

Übigens:
         width: 100% - 24px;
lustiger Versuch. CSS ist keine Programmiersprache. :-)

Das kam mir auch komisch vor.
Das lief so ab:

• ich setze meinen Balken auf 100%, ok.
• Dann füge ich etwas Text ein und gebe padding 12px dazu, damit er nicht am Rand anklatscht. Dadurch wird der Balken nach links um 24px ausgedehnt, es entsteht ein unschöner horizontaler Scrollbalken.
• Ich überlegte kurz und tippte obiges Konstrukt ein, und siehe da, es funktioniert in Mozilla, IE6 und Opera7 (mehr hab ich nicht getestet).

Inzwischen hab ich den Wert aber auf "auto" gestellt. Danke an MudGuard!

Grüße
Max

[Ingo Turski]

Hi,

Inzwischen hab ich den Wert aber auf "auto" gestellt. Danke an MudGuard!

Da dies die Voreinstellung ist, kannst Du die Definition genauso gut weglassen wie »width:100bitte« definieren. ;-)

freundliche Grüße
Ingo

[MudGuard]

Hi,

Inzwischen hab ich den Wert aber auf "auto" gestellt. Danke an MudGuard!
Da dies die Voreinstellung ist, kannst Du die Definition genauso gut weglassen

Nicht unbedingt.
Es könnte ja unter anderen Selektoren, die auch dieses Element auswählen, noch width-Angaben gesetzt sein.

cu,
Andreas

[Ingo Turski]

Hi,

Da dies die Voreinstellung ist, kannst Du die Definition genauso gut weglassen

Nicht unbedingt.
Es könnte ja unter anderen Selektoren, die auch dieses Element auswählen, noch width-Angaben gesetzt sein.

Wohl kaum in diesem Fall, da sonst der ungültige Wert auch keine Auswirkung gehabt hätte.

freundliche Grüße
Ingo