✔ Footerpositionierung

[Cherrywine]

Hej,

ich habe gerade das Gefühl, irgendwo ganz doll auf dem Schlauch zu stehen, aber nachdem ich mir jetzt die Nacht und den halben Tag mit und Ausprobieren mit Floaten & Positionierungen um die Ohren geschlagen habe, ohne die Lösung gefunden zu haben...

Und zwar habe ich ein Layout, das folgendermaßen aufgebaut ist:
########### wrap
___######## header
___######## main
______menu ## content
___###### /main
___###### footer
########### /wrap

Halt außenrum ein relativ positionierter Wrap, darin dann Header, Main und Footer, wobei der Main-Bereich aus dem Menue und einem Content mit variabler Länge besteht.

Mein Problem ist, dass sich die Position des Footers an der Länge des Contents orientiert. Ist der Content länger als das Menue, passt alles - ansonsten klebt der Footer allerdings unter dem Ende des Contents und das Menue ragt unter dem Footer hervor.

Wo habe ich da gerade das Brett vorm Kopf?

html,body {
	height:100%;
}

div#wrap {
	position:relative;
	min-height:100%;
}

div#main {
	padding-bottom:20px;
	position:relative;
	min-height:100%;
}

div#main_menue {
	position:absolute;
	margin-bottom:20px;
	left:0;
	top:-20px;
}

div#main_content {
	width:575px;
	margin:80px 10px 10px 190px;
	padding:10px;
}

div#footer {
	height:80px;
	position:absolute;
        bottom:0;
}

Zum Angucken:
zu kurzer Content
so soll's aussehen


Vielen Dank schonmal,
Cherrywine

 

[Maik]

Hi,

der Knackpunkt in deinem Modell ist die relative Positionierung des DIVs #main, sowie die absolute Positionierung des DIVs #main_menue, womit die beiden Elemente aus dem normalen Textfluss genommen werden, und daher ihr Inhalt das Elternelement #wrap an seinem unteren Elementrand "überlappt", und den Footer nicht nach unten verschiebt.

 

[Cherrywine]

Danke für eure Antworten; im Firefox läuft es jetzt paletti.
Ich habe alle Positionierungsangaben rausgeworfen und das Menue links gefloatet, der Footer cleart das dann wieder.

Nur der IE macht mal wieder Zicken - er lässt den Content erst unterhalb des links gefloateten Menues erscheinen. Das Menue in der Browserweiche clearen und den Conent nach rechts floaten haben's nicht gebracht.


Lieben Gruß
Cherrywine

 

[Maik]

Nimm mal folgende Änderungen und Ergänzungen im Stylesheet vor:

div#main_menue {
        margin:-20px 0 20px 10px;
        float:left;
        display:inline;
}

div#main_content {
        /*width:575px;*/ /* auskommentiert = deaktiviert */
        margin:80px 10px 10px 190px;
        padding:10px;
}

.index {
        /*width:550px;*/ /* auskommentiert = deaktiviert */
        margin:10px 10px 10px 0;
}

.index_left {
        width:260px;
        float:left;
        margin:10px 20px 10px -10px;
        display:inline;
}

.index_right {
        /*width:260px;*/ /* auskommentiert = deaktiviert */
        margin:20px 0 10px 290px;
}

                <!--[if gte IE 6]>
                        <style type="text/css">

                                ul li {
                                        margin-left:-20px;
                                        }
                                #top_navi ul li,#main_menue ul li {
                                        margin:0;
                                        }

                                /*#main_content {
                                        clear:left;
                                        float:left;
                                }*/ /* auskommentiert = deaktiviert */

                        </style>
                <![endif]-->

 

[Cherrywine]

Hach, perfekt.. danke vielmals