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– Bojangles2012年09月03日 12:28:33 +00:00Commented Sep 3, 2012 at 12:28
-
No, it dosent sit below the content, thats what the problem wasPeeyush Kushwaha– Peeyush Kushwaha2012年09月03日 12:40:54 +00:00Commented Sep 3, 2012 at 12:40
4 Answers 4
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
2 Comments
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;
}
3 Comments
Will it help http://jsfiddle.net/5sTub/1/
1 Comment
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>