...

View Full Version : Footer sticking to the bottom of the viewport when browser is manually resized?



pinkshiro
07-12-2008, 07:59 AM
Hey Guys,

I follow the negative margin approach for my footers. Ala:


div#wrapper {
position:relative;
margin-left: auto;
margin-right: auto;
width:878px;
text-align:left;
padding:0px;
min-height: 100%;
height: 100%;
z-index:1;
background-color:#FF0000;
}
html>body #wrapper {
height: auto;
}
div.footer{
margin-top:-24px;
height:24px;
width:772px;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
z-index:1;
background-image:url(../images/footer-bg.jpg);
background-repeat:no-repeat;
background-position:right;
color:#808184;
font-size:11px;
padding-left:106px;
}

So my footer sits below the "wrapper", and has a negative margin equal to it's height so it sits on the bottom of the screen in most situations.

BUT if I was to shrink the browser window using my mouse so it's, say, half the screen size. Now I hit refresh. so wrapper's height is 100% of the browser window, which is roughly half the screen size...if I drag the bottom of the browser down with my mouse, the size of the wrapper div doesn't automatically resize...hence my footer stays put at 50% - 24px...instead of moving with the bottom of the browser.

I must point out, that my wrapper div does resize if you resize the browser both vertically and horizontally at the same time. It only doesn't resize if you drag the browser directly down...

make sense? Any work arounds? I guess I could go for the absolutley positioned approach, but i've never liked that method :/

kochier
07-12-2008, 08:18 AM
Try adding
clear:both; to your footer, usually works for me.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum