Rolf: Spalten, float und clear.

SELF-Forum

Spalten, float und clear.

Rolf
– Informationen zu den Bewertungsregeln

Hallo,

dieses Forum hat mir schon oft sehr gut geholfen, doch dieses Mal konnte ich keine Lösung für mein Problem finden:

Ich möchte ein dreispaltiges Layout mit Fußzeile umsetzen, das ungefähr so aussehen soll:

|           |                     |                     |
|   Menü    |      Spalte 1       |     Spalte 2        |
|           |                     |                     |
|           |-------------------------------------------|
|           |                Fusszeile                  |
|           |-------------------------------------------|

Das Menü ist eine div mit float:left, die beiden Inhaltsspalten befinden sich in einer extra div mit einem margin nach links. Spalte 1 hat dann wieder einen float:left, Spalte 2 einen margin nach links.

Alle drei Spalten können unterschiedlich lang sein, oft ist das Menü wie oben in der Skizze Länger als die beiden Inhaltsspalten. Wenn ich nun hinter die beiden Inhaltsspalten ein Element mit clear:both setze, wird die Fusszeile aber bis unter das Menü gerückt (außer im IE). Das sieht dann so aus:

|           |                     |                     |
|   Menü    |      Spalte 1       |     Spalte 2        |
|           |---------------------|---------------------|
|           |                                           |
|           |                                           |
|           |                                           |
|-------------------------------------------------------|

Fusszeile

Wie kann ich das verhindern? Ich sitze da heute schon den ganzen Tag dran und habe mir die Augen wundgegoogelt.

Besten Dank,
Rolf

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Spalten, float und clear.

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    Alle drei Spalten können unterschiedlich lang sein, oft ist das Menü wie oben in der Skizze Länger als die beiden Inhaltsspalten. Wenn ich nun hinter die beiden Inhaltsspalten ein Element mit clear:both setze, wird die Fusszeile aber bis unter das Menü gerückt (außer im IE). [...]
    Wie kann ich das verhindern?

    Der SELFHTML Weblog-Artikel Grundlagen für Spaltenlayout mit CSS widmet sich der ganzen Thematik sehr ausführlich.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Spalten, float und clear.

      Rolf
      – Informationen zu den Bewertungsregeln

      Der SELFHTML Weblog-Artikel Grundlagen für Spaltenlayout mit CSS widmet sich der ganzen Thematik sehr ausführlich.

      Tausend Dank, genau sowas habe ich gesucht und die ganze Zeit nicht gefunden. Die Lösung ist denkbar einfach, allerdings auch nicht sonderlich offensichtlich: Die div, die Spalte 1 und 2 umgibt, muss overflow:hidden gesetzt haben.

      Viele Grüße,
      Rolf

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln