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

pinkshiro · 03-02-2009, 07:45 AM

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>

pinkshiro · 03-02-2009, 08:04 AM

Actually, having a play - position:fixed; doesnt solve this problem at all

abduraooft · 03-02-2009, 08:18 AM

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

pinkshiro · 03-03-2009, 01:47 AM

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.

abduraooft · 03-03-2009, 07:11 AM

Quote:

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

pinkshiro · 03-03-2009, 09:30 PM

http://www.cssplay.co.uk/boxes/width.html

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