positioning a div at bottom of the container element

Question

Layout of the web page i am designing is like this fiddle : http://jsfiddle.net/5sTub/

EDIT: NOTE: I am not trying to get a sticky footer. i just want to position it at bottom of the page. Please see the fiddle before you answer

i am trying to position the footer at the bottom of the page but am unable to as you can see in the link above. i have tried everything i found on the internet including setting the container element's position:relative; and the footer's position:absolute; and bottom:0; but nothing seems to be working, in fact, if you add the container div to the code and make its position:relative;, and add the following css to footer : position:absolute; bottom: 0; , the footer seems to disappear somewhere. I've been struck on this problem since quiet a long time and the only solution i've found so far is to set my header and my content and the footer's position:static; , which dosent server the purpose and ruins whole layout and looks quiet ugly. I want to avoid the use of javascript. please help, thanks in advance.

EDIT: Illustration of what i need: enter image description here

where blue is the footer, dark blue is header, light blue is actual content and pink one is a sticky div. i do not want to make footer sticky, but i want it to be like one you'll find on a normal page, only problem is that it dosent stay at the bottom of the page (see the fiddle)

I think this is the most confusing question I've _ever_ seen on SO. If you just want your footer at the bottom of the page, just don't give it a position, and it'll sit below the content. I don't see what your problem is. — Bojangles, Sep 03 '12 at 12:28
No, it dosent sit below the content, thats what the problem was — Peeyush Kushwaha, Sep 03 '12 at 12:40

Jitender · Answer 1 · 2012-09-03T12:20:56.603

2

Use this

add this css property in your css

html, body{height:100%}


div#footer {
        color: white;
        background: rgba(68, 68, 68, 0.8);
        width: 100%;
        position:absolute;
        bottom:0;
    }

edited Sep 03 '12 at 12:20

answered Sep 03 '12 at 12:13

Jitender

7,593
30
104
210

as i said, and i repeat myself again, I am not looking for a fixed or sticky footer. i just wanna position it at bottom of the page ! – Peeyush Kushwaha Sep 03 '12 at 12:15
"bottom of the page" is ambiguous! Everybody is taking a best guess at what you want to do, so please explain the behaviour you want better. – Bojangles Sep 03 '12 at 12:18
sorry if i have not mademyself clear. i now have added a simple illustration to help you guys understand my question better. – Peeyush Kushwaha Sep 03 '12 at 12:28

score 2 · Answer 2 · edited May 23 '17 at 12:13

2

You can use Sticky Footer method for this. Read this http://ryanfait.com/sticky-footer/

For example write like this:

HTML

<div class="container"></div>

<div class="footer"></div>

CSS

body,html{
 height:100%;
}
.container{
 min-height:100%;
}
.footer{
 height:40px;
 margin-top:-40px;
}

Check this for more Flushing footer to bottom of the page, twitter bootstrap

edited May 23 '17 at 12:13

Community

1
1

answered Sep 03 '12 at 12:15

sandeep

91,313
23
137
155

not looking for a sticky footer, but instead i want to position it at bottom of the page – Peeyush Kushwaha Sep 03 '12 at 12:17
If my answer is not what you want then @rohit answer is right. – sandeep Sep 03 '12 at 12:19

score 1 · Accepted Answer · answered Sep 03 '12 at 12:25

1

Will it help http://jsfiddle.net/5sTub/1/

answered Sep 03 '12 at 12:25

Sowmya

26,684
21
96
136

**side note for people with same kind of problem**: in order to set the height of #wrapper in percentages in the fiddle above, you'll have to set the height of body first! , and most probably, you'd want to set the height of your body in percentages too! – Peeyush Kushwaha Sep 03 '12 at 13:46

score 0 · Answer 4 · answered Apr 14 '15 at 05:35

I do not know if you resolved this or not, however I ran into a similar problem and resolved as follows:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" " http://w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css" >
div#mypage {
    top:0;
    background: purple;
    color: white;
}
div#pageheader {
    top:0;
    left:0;
    height: 20%;
    position:absolute;
    width:100%;
    background: green;
    color: white;
 }
div#pagecontent {
}
div#contentleft {
    display: inline-block;
    background: blue;
    position:absolute;
    border-radius: 2px;
    left:0%;
    right: 15%;
    width:15%;
    height: 92.5%;
    top: 5%;
    color: white;
}
div#contentcenter {
    display: inline-block;
    background: yellow;
    position:absolute;
    border-radius: 2px;
    left:15%;
    right: 30%;
    width:80%;
    height: 92.5%;
    top: 5%;
    color: black;
}
div#contentright {
    display: inline-block;
    background: red;
    position:absolute;
    border-radius: 2px;
    left:95%;
    right: 5%;
    width:5%;
    height: 92.5%;
    top: 5%;
    color: white;
}
div#pagefooter {
    color: white;
    background: rgba(68, 68, 68, 0.8);
    width: 100%;
    height: 2.5%;
    position:fixed;
    left:0;
    bottom:0;
}
</style>
<head>
<title>Multiple Div's</title>
</head>
<body bgcolor="#cccccc">
<div id="mypage">
    <div id="pageheader">HDR</div>
    <div id="pagecontent">PAGE CONTENT
        <div id="contentleft">LEFT</div>
        <div id="contentcenter">CENTER</div>
        <div id="contentright">RIGHT</div>
    </div>
    <div id="pagefooter">FOOTER</div>
</div>
</div>
</body>
</html>

Could you please elaborate more your answer adding a little more description about the solution you provide? — abarisone, Apr 14 '15 at 05:57

positioning a div at bottom of the container element

4 Answers4