Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Footer sticking to the bottom of the viewport when browser is manually resized?

    Hey Guys,

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

    Code:
    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 :/
    Last edited by pinkshiro; 07-12-2008 at 08:07 AM.

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    136
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Try adding
    Code:
    clear:both;
    to your footer, usually works for me.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •