Absolute und relative Positionierung

[Hermit]

Hallo zusammen,

habe hier ein Problem mit der Positionierung. Ich hab ein Header-Div, ein Navi-Div und ein Content-Div, die alle absolut positoniert sind, damit ich den Z-Index nutzen kann. Jetzt will ich unter das Content-Div ein Footer-Div setzen, das ich nicht absolut positionieren kann, da sich die Höhe vom Content variabel an den Inhalt anpasst.

Wie schaffe ich dass, dass der immer unten am Content-Div klebt? Hab "position: relative;" ausprobiert, das hat aber nicht geklappt. Im Moment hängt das Footer-Div oben über dem Header.

Hier ist der Body des HTML

<div id="wrapper">
        <div id="header">
                <h2 class="logo">Firmenname</h2>
                <h2 class="slogan">Industrie- und Baubedarf<br />Gro&szlig;handel und Fabrikation</h2> 
                <div class="clear"></div>             
        </div>
        <div id="navigation">
                <ul class="menu">
                        <li class="act"><a href="/">Home</a></li>
                        <li><a href="produkte-leistungen.html">Produkte / Leistungen</a></li>
                        <li><a href="kontakt-impressum.html">Kontakt / Impressum</a></li>
                </ul>
        </div>
        <div id="content">
                <h1>Willkommen bei der Firma GMBH.</h1>
                <p></p>
        </div>
<div id="footer">
    &copy; 2012 Firma GMBH
</div>        
</div>

und Teile der CSS

#wrapper {
    width: 840px;
    margin: 0 auto;
}

#header {
    width: 838px;
    height: 138px;
    border: 1px solid #02407d;
    background: url(img/header-bg.gif) repeat-x;
    margin: 20px 0 10px;
    z-index: 1;    
    position: absolute;     
}

#navigation {
    width: 248px;
    padding: 10px;
    border: 1px solid #fff;
    background: #045bb3;
    z-index: 10;
    margin: 110px 0 0 20px;    
    position: absolute;    
}

#content {
    position: absolute;
    width: 758px;
    border: 1px solid #689dd1;
    padding: 40px;
    background: #cfe0f1;
    z-index: 5;
    margin: 165px 0 0 0px;        
}


#footer {
    width: 840px;
    height: 40px;
}

Bin dankbar über jeden Tip.

 

[spaceCookie]

Benutze position absolute nicht. Wenn man nicht weiß wofür man es benutzen möchte führt es in den meisten Fällen nur zu Komplikationen.
Dein Layout besteht doch nur aus feststehenden Blöcken wozu also die absolute positionierung?

Gehen wir das mal anders an. Mit welchen Problemen wirst du denn konfrontiert wenn du es ohne die absolute Positionierung versuchst?

Edit: wolltest du vielleicht sowas in der Art machen? http://pastie.org/4909719


~cookie

 

[Hermit]

Hab das jetzt so gemacht: #4913467 - Pastie

Hab das Content-Div so angelegt, dass darin der eigentliche Content (#content-body) und das Footer-Div beide enthalten sind.

Die absolute Positionierung brauche ich deswegen, weil ich mit Z-Index die Navigation über den anderen beiden Containern schweben lasse.