• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fusszeile nicht unten

E

ellosfallos

Neues Mitglied
Hallo!

Hier der Code zu meinem Problem:

//CSS:
#container{
width:1000px;
margin-left:auto;
margin-right:auto;
}


#header{
position:absolute;
top:0px;
margin: 0px;
width:1000px;
height:50px;
}


#content{
position:absolute;
top:60px;
margin-left:100px;
width:800px;
}


#footer{
margin-left:100px;
width:800px;
height:50px;
}


//HTML:
<div id="container">


<div id="header">
Kopfzeile
</div>

<div id="content">
Inhalt
</div>

<div id="footer">
Fusszeile
</div>


</div>


Das Problem ist, dass der footer nicht unten ist, egal ob ich noch ein "top:" mit reinbringe oder ein "margin-top:".
Wie muss man es machen, damit der footer UNTER dem content erscheint aber immernoch im container ist (also beim
Browserfenster-Ziehen mitgeht)?

Für Ihre Hilfe würde ich mich sehr freuen! Vielen Dank schonmal,
mfG
 
Absolute Positionierung würde ich für so etwas nicht verwenden.

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>title</title>
        <style>
/*<![CDATA[*/
#container {
    width: 1000px;
    margin: 0 auto;
    background: aquamarine;
}

#header {
    height: 50px;
    background: fuchsia;
}

#content {
    width: 800px;
    margin: 0 auto;
    background: sandybrown;
}

#footer {
    width: 800px;
    margin: 0 auto;
    height: 50px;
    background: khaki;
}
/*]]>*/
        </style>
    </head>

    <body>
        <div id="container">
            <div id="header">
                #header
            </div>

            <div id="content">
                #content
            </div>

            <div id="footer">
                #footer
            </div>
        </div>
    </body>

</html>

Float ist aber prinzipiell sicher ein Stichwort für dich.

- Float

Clearfix:

- The New Clearfix Method
 
Vielen Dank für die schnellen Antworten!

Ich habe es jetzt wie folgt gelöst:
Erstmal die ganzen absolute positions gegen relative positions.
Und dann
im #container ein "bottom-padding: 50px;" und gleichzeitig
im #footer ein "bottom: -50;".

MfG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben