3-Spalten-Layout und Footer

[Mathias]

Hi!

Ich habe ein Layout mit 3 Spalten. Das klappt soweit. Dadrunter soll ein Footer sein. Das klappt nicht. Der Footer soll unter allen 3 Spalten sein, also muss er ja immer unter dem längsten sein. Leider wird er aber immer unter dem mittleren angezeigt. Wenn der aber nicht der längste ist, siehts scheiße aus. Hier der Quelltext:

<div id="right">rechte Seite</div>
<div id="left">linke Seite</div>
<div id="content">Inhalt - der Footer ist immer so weit unten, wie das ding hier lang ist.</div>
<div id="footer">der Footer</div>

und hier kommt mein css-text

#left {
            float:left;
            width:215px;
            background-color: white;
            height:20px;
       }
       #right {
            float:right;
            width:180px;
            background-color: white;

}

#content {
            margin-left: 215px;
            margin-right:215px;
            background-color: white;
       }
       /* IE CSS Hack by vbdesigns.de */

* html #left {
            margin-right: -3px;
       }

* html #right {
            margin-left: -3px;
       }

* html #content {
            margin: 0 212px 0 212px;
            display:inline-block;
       }

/* Ende IE CSS Hack by vbdesigns.de */

#footer
 {
  clear: both;
  height: 20px;
  background-color: lime;
 }

hoffe es kann mir einer helfen. und ich hoffe man konnte mich verstehen.

vielen dank im voraus,

gruß mathias

[molily]

Hallo,

Eine Idee: Mach ein Element um alle drei Spalten und erzeuge einen Block Formatting Context bzw. gib ihm hasLayout.
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen

Mathias

[Mathias]

Hallo,

Eine Idee: Mach ein Element um alle drei Spalten und erzeuge einen Block Formatting Context bzw. gib ihm hasLayout.
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen

Erstmal Danke! Leider passiert bei mir folgendes: Ich "baue" den Container drumherum und gebe ihm als einzige eigenschaft overflow:auto . Schön, aber dann erscheint ein Scrollbalken. overflow:hidden schneidet alles ab und overflow:visible bringt mir ja nix.

auch die andere lösung mit dem einfügen eines div mit der id=clearer wie auf der seite beschrieben hat nicht funktioniert. und die pseudoklassen wie :after funktionieren im ie6 und älter nicht, den leider leider aber viele nutzen.

Gibt es noch eine andere idee? wenn ich den footer komplett aus dem ersten container rausnehme? aber das ist ja das gleiche, wie wenn ich um die 3 Spalten einen Container mache?!

mfg

mathias

[Steel]

Hiho!

Hast Du schonmal versucht alle 3 Container zu floaten?

[Mathias]

Hiho!

Hast Du schonmal versucht alle 3 Container zu floaten?

habe content mal nach links floaten lassen, aber das klappt dann auch nicht. Schade eigentlich. Danke für den Vorschlag.

Hat sonstwer noch eine Idee?

Falls es hilft: das css-layout ist ein Template für Joomla 1.5. left ist das menu, right einfach eine rechte spalte und content halt der inhalt. wenn der footer hochrutscht, gerade dann, wenn halt wenig inhalt da ist, dann schneidet der footer eiskalt das menü durch...

viele grüße

mathias

[Steel]

Hiho.

Ich bin grad etwas erschlagen und mag mich deshalb wirklich nicht detailiert mit dem Problem befassen. Deshalb empfehle ich Dir mal die Layouts der Intensivstation:

http://www.intensivstation.ch/templates/

Das Schoene dabei ist, dass alles nett erklaert wird. Dann kannst Du entweder mit einem Layout dort neu anfangen, oder einfach mal vergleichen. Vielleicht hilft's.

Viel Glueck!

[Struppi]

Ich habe ein Layout mit 3 Spalten. Das klappt soweit. Dadrunter soll ein Footer sein. Das klappt nicht. Der Footer soll unter allen 3 Spalten sein, also muss er ja immer unter dem längsten sein. Leider wird er aber immer unter dem mittleren angezeigt. Wenn der aber nicht der längste ist, siehts scheiße aus. Hier der Quelltext:

Ich kann das Problem nicht nachvollziehen, bei mir ist der footer immer unter der längsten Spalte. Das einzige Problem, ist das die Spalte 'left' nur 20px hoch ist, d.h. wenn der Inhalt höher ist wird dieser ausserhalb der Spalte angezeigt.

Struppi.

[Mathias]

Ich kann das Problem nicht nachvollziehen, bei mir ist der footer immer unter der längsten Spalte. Das einzige Problem, ist das die Spalte 'left' nur 20px hoch ist, d.h. wenn der Inhalt höher ist wird dieser ausserhalb der Spalte angezeigt.

Struppi.

Jo, das wars! Keine Ahnung, warum der nur 20px hoch war, aber jetzt klappts!

Danke für eure Bemühungen!!!!

mfg

mathias

[Struppi]

Jo, das wars! Keine Ahnung, warum der nur 20px hoch war...

Weil du es so angegeben hast:

       #left {  
            float:left;  
            width:215px;  
            background-color: white;  
            height:20px;  
       }  

Struppi.