CODEWITHSUNDEEP
htmlcss
Maysam
Maysam

Reputation: 7367

Align Div to bottom of page, absolute positioning does not work

I want to put a DIV in bottom of page in two different situation, if content of page has enough height to fill the screen bottom DIV should stick to the end of content DIV, and when it has not enough height or it's empty, in this situation bottom DIV should stick to the end of page.

It's my HTML and CSS (http://jsfiddle.net/maysamsh/eWhvs/embedded/result/)

CSS:

@charset "UTF-8";
*{
    padding:0;
    margin:0;
    color:#FFF;
}
body {
    background-image: url(http://ashraafi.com/img/bgpattern.png);
    background-repeat: repeat;
}
#wrapper{
    min-width:900px;
    width: 100%;
    background-color:#CCC;
    position:relative;
}
#top{
    width:inherit;
    height:40px;
    background-color:#000;
    position:relative;
}
#content{
    width:inherit;
    background-color:#36C;
    position:relative;
}
#bottom{
   position:absolute;
   bottom:0;   
   left:0;
   background-color:#42210b;
   width: inherit;
   height: 35px;
}​

HTML:

<div id="wrapper">
    <div id="top">
        top
    </div>
    <div id="content">
        content
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
        <p>foo</p>
    </div>
    <div id="bottom">
        bottom
    </div>
<div>

Upvotes: 0

Views: 5215

Answers (1)

tw16
tw16

Reputation: 29585

The first issue is that you have position:relative on the #wrapper. If you remove it then the positioning will be relative to the page.

But to get a sticky footer is a little more complex than that. I would recommend: http://ryanfait.com/sticky-footer/

Upvotes: 1

Related Questions