1

I was working on extending my footer to the bottom of the page, i came close to a few solutions i was given but it doesnt seem to work.

I want it so the div bottomHalf extends to the bottom of the page on the browser. But for some reason it keeps going past it.

How can i get this to work? I put height to 100% in body wrapper and bottomHalf

<style type="text/css">

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #F0E4C9;
    font-family:"Times New Roman", Times, serif;
}

#wrapper {
    margin: 0 auto;
    width: 990px;
    position: relative;
    min-height: 100%;
    height: 100%;
}

#topHalf {
    margin: 0 auto;
    width: 990px;
    height: 435px;
    background-color:#960;
}


#navigation {
    margin: 0 auto;
    width: 990px;
    height: 55px;
    background-color:#0CF;
}

#bottomHalf {
    margin: 0 auto;
    width: 990px;
    min-height: 100%;
    height: 100%;
    background-color: #4d3c37;
    color: #FFF;
}

</style>

<div id="wrapper">
  <div id="topHalf"></div>


  <div id="navigation"></div>


  <div id="bottomHalf">EXTEND THIS TO BOTTOM OF PAGE, GOES TO FAR</div>

</div>
Eric Arsmeinz
  • 33
  • 1
  • 1
  • 7
  • Have you tried positioning the bottom div absolutely at `bottom: 0`? Have a look at [this question](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) and some of the answers there. – Amos M. Carpenter Nov 15 '11 at 04:52

1 Answers1

1
#bottomHalf {
margin: 0 auto;
width: 990px;
min-height: 100%;
height: 100%;
background-color: #4d3c37;
color: #FFF;
possition: fixed;
bottom: 0;
}
Swap
  • 298
  • 1
  • 4