-1

I have some serious problems make my footer stick to the bottom of my page. I have tried a lot of tutorials that i have found on the internet and none of them made it work?! No matter what i do, my footer will always be beneath my content in my content-div even if i put the footer outside my container-div?!?!

Heres my code. I hope you can see and tell me whatever i do wrong...

I have also tried with a cleaner, but didn't make it work either...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Untitled</title>
</head>
<style>
/*=============== HTML ============*/
html
{
    min-height: 100%;
}
/*=============== Body ============*/
body { 
    font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    min-height:100%;
    height: auto;
    width: 100%;
}

/*=============== Container  ============*/
.container
{
    width: 98%;
    margin: 0px auto 0px auto;
    padding: 5px 0 0 0;
    background-color: #F5F5F5;
    height: 100%;
    position:relative;
}

/*=============== Højre/reklame ============*/
.commercial
{
    width:200px;
    height:90%;
    float:right;
    background-color:inherit;
    margin: 0px 5px 5px 5px;
    padding:5px 5px 5px 5px; 
}

/*=============== Venstre ============*/
.lefty
{
    width:150px;
    height:90%;
    float:left;
    margin:5px 5px 5px 5px;
    padding:5px 5px 5px 5px;
}


/*=============== Indhold1 ============*/
.content
{

    background-color: inherit;
    margin:5px 220px 5px 170px;
    padding:0px 5px 5px -3em;
    float:none;
}


/*=============== Footer ============*/
.footer
{
    width:98%;
    border-top: 2px solid #242F24;
    background-color: #F5F5F5;
    text-align: center;
    position: relative;
    bottom:0;
    z-index: 10;
    height: 3em;
    margin: auto;


</style>

<body>

<div class="container">
<div class="lefty">
Left
</div>
<div class="commercial">
Right
</div>
<div class="content">
Indhold<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>og hvad så hvis vi putter en masse ekstra indhold på?<br>


</div><!—End Content—>
<div class="footer">
Footer
</div>
</div><!—End Container—>


</body>
</html>

1 Answer 1

4

Set the footer to fixed position:

.footer {
  bottom:0;
  position:fixed;
}
3
  • 1
    Not bad. But that didn't completely solve my problem though i can have very long content or very small content and on pages with long content this fixed position is in the bottom of the browser and not on the html page and i need in on the bottom of the page and not always visible in the browser window - if you understand? Commented Feb 3, 2013 at 9:33
  • Ah, I didn't understand you meant that. In that case though, it should already work like that, at least when it's too large in width to fit next to the previous div. If 'content' and 'footer' fit next to each other in 'container', you can either increase the width of either or give 'content' margin-right:<certain amount of pixels>;
    – paddotk
    Commented Feb 4, 2013 at 15:53
  • Also, if I may suggest something, it's better to learn xhmtl instead of html 4. Html 4 is quite old and may not be supported by all browsers in the near future, so you gotta stay up-to-date. ;) Besides that, you might want to improve your html markup a little more before diving into this level of css; your html contains a few flaws. (such as <!- comment -> which should be <!-- comment --> and an empty <style> tag which should be <style type="text/css rel="stylesheet">
    – paddotk
    Commented Feb 4, 2013 at 15:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.