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 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Width:100%, Position:relative bug + Firefox and IE

    I've just come across a bit of a bug in some code i've been reusing for quite a while - whoops.

    I'm trying to make my footer div 100% width of the browser.

    I have a wrapper with a width of 1000px, and a 100% height.

    My footer div is positioned relatively, underneath the wrapper, and is given a negative margin to pop back up over the top of the wrapper div.

    When my browser is shrunk down to less than 1000 pixels, the footer div doesn't stretch 100% of the browser...only 100% of the viewport! In all browsers! I don't understand this.

    Replacing position:relative with position:fixed on my footer corrects the problem. I just dont like not knowing why. Can anyone shed some light? Here's my code:

    Code:
    html, body{
    	width:100%;
    	height:100%;
    	margin:0px;
    	padding:0px;
    }
    div#wrapper{
    	z-index:1;
    	width:1000px;
    	height:100%;
    	min-height:100%;
    	background-color:#6666FF;
    }
    html>body #wrapper {
    	height: auto;
    }
    div.footer{
    	width:100%;
    	height:40px;
    	margin-top:-40px;
    	background-color:#33FF99;
    	position:relative;
    	z-index:10;
    }
    and my HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="styles1.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="wrapper">
    </div>
    <div class="footer">
    </div>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Actually, having a play - position:fixed; doesnt solve this problem at all

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Do you really need width:1000px; for your #wrapper?
    Removing that property would fix the width of your footer.

    If you need to set a width to your wrapper, then put your footer inside that wrapper, like http://bonrouge.com/3c-hf-fluid.php?nc
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I ended up resolving this issue by adding a min-width to the footer

    Because my width was a percentage, and min-width a pixel value, it seems to work in IE6 also.

    Position absolute, bottom:0 was how I used to make footers, but I found discrepancies with it and move way from it.

    I would suggest it wouldn't work in this scenario as my wrapper isnt 100% width, so my footer wouldn't stretch 1005 of the browser, only 100% of the wrapper. Not what i'm after in this instance.

    Ty for your thoughts.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I ended up resolving this issue by adding a min-width to the footer

    Because my width was a percentage, and min-width a pixel value, it seems to work in IE6 also.
    IE6 completely ignores min/max-width/height, except for a special case.
    See http://www.quirksmode.org/css/width.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    http://www.cssplay.co.uk/boxes/width.html

    I used method 1 and it seemed to work...


  •  

    Posting Permissions

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