Div in the bottom

[allahverdi]

I have very simple CSS question.

How to make my div at the bottom of page forever?
Vertical-align=bottom - doesn't work, or i can't make it work.

[Medyman]

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

[allahverdi]

Thanks a lot

[allahverdi]

Medyman, i tried it but it doesn't work. I know, there is something wrong in my css:


body{
margin:0;
padding:0;
height:100%;
}
.container{
min-height:100%;
position:relative;

}
.header{
height:210px;
background: url(../images/header_bg.png) #FFFFFF repeat-x;
}
.logo{
float:left;
}
.menu{
float:left;
width:auto;
font-family:"Trebuchet MS";
font-size:16px;
padding-top:70px;
padding-left:50px;
}
.menu ul{
list-style:none;
margin:0;
padding:0;
}
.menu ul li{
display:inline;
}
.menu ul li a{
padding:4px 17px;
background:#333333;
color:#808080;
text-decoration:none;
border:1px #333333 solid;
}
.menu ul li a:hover{
padding:4px 17px;
background:#333333;
color:#FFFFFF;
text-decoration:none;
border:1px #808080 solid;
}
.menu ul li a.selected{
padding:4px 17px;
background:#BF1E2D;
border:1px #808080 solid;
color:#FFFFFF;
text-decoration:none;
}
.sidebar{
float:right;
background:#29AAE2 url(../images/sidebar_bg.png);
margin-right:20px;
color:#FFFFFF;
padding:10px 10px 10px 10px;
width:250px;
font-size:13px;
border-left:2px solid #CCCCCC;
}
.sidebar h4{
padding:2px;
margin:0;
border-bottom: 1px white dashed;
font-family:"Trebuchet MS";
font-size:20px;
}

.sidebar ul{
list-style:none;
font-size:16px;
padding:5px;
margin:0;
font-family:"Trebuchet MS";
}

.sidebar ul li a{
color:#FFFFFF;
text-decoration:none;
}
.sidebar ul li a:hover{
font-weight:bold;
}

.main{
width:100%;
overflow:auto;
padding-bottom:10px;
}
.content{
float:left;
width:650px;
padding-left:15px;
}
.content h3{
padding-right:0;
padding-left:10px;
padding-top:5px;
padding-bottom:5px;
margin:0;
font-family:"Trebuchet MS";
color:#29AAE2;
border-bottom:1px #29AAE2 solid;
}
.content h3 a{
margin:0;
font-family:"Trebuchet MS";
color:#29AAE2;
text-decoration:none;
}
.project{
margin-top:20px;
-moz-opacity:0.6;
filter:alpha(opacity=60);
opacity:0.6;
-khtml-opacity: 0.6;
}
.project .pimage{
padding:5px;
border:1px solid #333333;
}
.project:hover{
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
-khtml-opacity: 1;
}

.project div{
display:inline;
}
.descl{
padding-left:10px;
}
.grey{
color:#666666;
}

.fullproject .project_img{
margin-left:auto;
margin-right:auto;
padding:5px;
margin-top:10px;
border:1px solid #CCCCCC;
-moz-opacity:0.6;
filter:alpha(opacity=60);
opacity:0.6;
-khtml-opacity: 0.6;
}
.fullproject .project_img:hover{
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
-khtml-opacity: 16;
}
.fullproject .about_project{
padding:10px;
font-family:"Trebuchet MS";
}
.aboutme{
font-family:"Trebuchet MS";
}

.contacts{
font-family:"Trebuchet MS";
}
.home{
font-family:"Trebuchet MS";
}
.footer{
diplay:block;
width:100%;
background:#333333 url(../images/footer_bg.png) repeat-x scroll;
color:#FFFFFF;
font-family:"Trebuchet MS";
position:relative;
bottom:0;
height:22px;
border-top: 2px solid #333333;
}
.footer span{
padding-left:10px;
}

[boogyman]

assign the footer element a absolute position, and a bottom location of zero



.footer {
position:absolute;
bottom: 0;
}


that will appear as if the footer is stuck to the bottom of the browsers viewport, regardless of how must or how little is on the screen.

[allahverdi]

Doesn't work here (http://www.creative-boy.com)

[mburt]

Try:


.footer {
position:absolute;
bottom:0px;
left:0px;
}

[allahverdi]

Didn't work again

[rangana]

I did'nt looked into your CSS, but basing on the code you've shown on post#4.
Try to change highlighted to absolute, and ensure to add the font in red.


.footer{
diplay:block;
width:100%;
background:#333333 url(../images/footer_bg.png) repeat-x scroll;
color:#FFFFFF;
font-family:"Trebuchet MS";
position:absolute;
bottom:0px;
height:22px;
border-top: 2px solid #333333;
}


If that ain't help, I have this feeling that there is something in your CSS that controls the footer. If so, then I would do something inline:


<div class="footer" style="position:absolute;bottom:0px;left:0px;"><span>&copy;2008 Creative-Boy.Com :: All rights reserved</span></div>
</div>


Hope that helps.

[allahverdi]

It doesn't work too, i think something wrong in my css, but i can't find what ><

[TheJoshMan]

.main {
overflow:auto;
padding-bottom:10% !important;
width:100%;
}

[allahverdi]

Worked thanks.

[TheJoshMan]

No problem

[bistromath]

It might be easiest to try and use a different technique instead of driving yourself crazy trying to get one to work. I've used this with success plenty of times, and with a little tweaking it's bug-free.

http://www.themaninblue.com/writing/perspective/2005/08/29/
http://www.themaninblue.com/experiment/footerStickAlt/

Depends on your style I guess. Good luck...

[bistromath]

Oops, didn't see that the problem was solved, my bad.