Sticky footer problems in FF

[jense]

Hi all. I been looking for over a week all over the internet to solve my problem. Some people showed up having the same problem, but no matter what they suggested or what I tried, I didn't find a solution. Yesterday in a tantrum I started from scratch again, accidentally overwriting another version I had saved where my problem seemed to be somewhat 'less'.I'm trying to make a sticky footer. One that either sticks to the bottom of the viewport with short content, or one that sticks to the bottom of the page with long content, whichever is lowest. I tried various tutorials I found like for example the footStickerAlt or A CSS Sticky Footer among others. For the moment, I'm only interested in fixing this in FF. I'm not even going to try and tell you what IE is doing :/

1. When I resize my screen to a 1600x1200 (I'm working on 1920x1200) size and I have short content, everthing works fine (I cut the picture to what matters only): Short content on 1600x1200.
2. I went to a 1024x768 size with the same short content and it looks ok. The viewport isn't high enough for the whole content of the page to show and thus a vertical scroll bar came up: Short content on 1024x768.
3. However, when scrolling down, one can see that the footer is stuck where the end of the viewport at first was: Short content on 1024x768 - scrolled down.

The content seems to spill out, and the background image also stops at the end of the viewport. Same goes for a long content on a 1600x1200 or bigger. The content spills out underneath the viewport and the footer is stuck at the bottom of the viewport, making it seem to float when scrolling down.Now I figured it has something to do with absolute postioning the footer. The file that I overwrote yesterday (I know, it's a stupid stupid mistake) made the footer stick at the bottom of the page, not only the viewport. I forgot which tutorial I used for it. I even forgot if I found it out myself by experimenting and lucky accident. But I still had a problem: everything below the viewport didn't have any background image anymore. My boxes were placed perfectly and the footer easily stuck underneath it, but the background (the brown color in my screenshots) just stopped where the viewport ended.Now I'm back to square. I don't know how to stick my footer like I want it to (to whichever is the lowest, either the viewport, or the page) and my background image stops. I like fixing things on my own, but my head is killing me from all this figuring out and I finally decided to come here and try my luck and ask for help.Thanks for any look into this matter in advance!Jense--View the problem live.CSS:

* 	{		padding: 0;		margin: 0;		}html, body {  	height: 100%;		}	body {		background-color: #bcbdab;		color: #82634e;		font: normal 11px Verdana, sans-serif;		margin: 0;		padding: 0;		text-align: left;		}h1 	{		font: italic small-caps 900 20px Arial, sans-serif;		padding-left: 16px;		}h2 	{		font: italic small-caps 900 14px Arial, sans-serif;		padding: 6px;		}div#container {		background-color: #bea28c;		border-left: 1px solid #82634e;		border-right: 1px solid #82634e;		height: auto !important;		margin: 0 auto;		min-height: 100%;		width: 852px;		}		* html div#container {				height: 100%;				}div#header {		background-color: #5ddbd7;		border-bottom: 1px solid #82634e;		height: 222px;		}		div#header p {				margin: 0;				padding: 190px 0 0 0;				text-align: left;				}	div#footer {		background-color: #5ddbd7;		border-top: 1px solid #82634e;		bottom: 0;		height: 26px;		position: absolute;		width: 852px;		}		div#footer p {				margin: 0;				padding: 6px 0 0 0;				text-align: center;				}div.left {		background-color: #f19d92;		border: 1px solid #82634e;		float: left;		height: auto;		margin: 16px;		width: 480px;		}div.box1 {		background-color: #e8d8b7;		border: 1px solid #82634e;		float: left; 		margin: 16px 0 0 16px;		padding: 0;		}				div.box1 p {				margin: 0;				text-align: left;				}div.box2 {		background-color: #e8d8b7;		border: 1px solid #82634e;		clear: left;		float: left;		margin: 16px 0 0 16px;		padding: 0;		width: 446px;		}		div.box2 p {				margin: 0;				padding: 6px;				text-align: left;				}div.box3 {		background-color: #e8d8b7;		border: 1px solid #82634e;		clear: left;		float: left;		margin: 16px;		padding: 0;		width: 446px;		}		div.box3 p {				margin: 0;				padding: 6px;				text-align: left;				}div.right {		background-color: #f19d92;		border: 1px solid #82634e;		float: right;		height: auto;		margin: 16px 16px 16px 0;		width: 320px;		}div.box4 {		background-color: #e8d8b7;		border: 1px solid #82634e;		clear: none;		float: right;		margin: 16px;		padding: 0;		}		div.box4 p {				margin: 0;				padding: 6px;				text-align: left;				}div.box5 {		background-color: #e8d8b7;		border: 1px solid #82634e;		clear: none;		float: right;		margin: 0 16px 16px 16px;		padding: 0;		}		div.box5 p {				margin: 0;				padding: 6px;				text-align: left;				}

XHTML:

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>		<head>			<title>test page</title>			<link rel="stylesheet" href="new.css" type="text/css" />		</head>		<body>			<div id="container">					<!-- start: header -->				<div id="header">					<p><h1>lorem ipsum.</h1></p>				</div>	<!-- end: header -->						<!-- start: leftcolumn -->				<div class="left">					<div class="box1">						<p><h2>lorem ipsum dolor sit amet.</h2></p>					</div>					<div class="box2">						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>					</div>					<div class="box3">						<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>						<p>Nam libero tempore, ###### soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>					</div>				</div><!-- end: leftcolumn -->	<!-- start: rightcolumn -->				<div class="right">					<div class="box4">						<p>Mauris placerat porttitor mauris. Cras ac metus id nisi rhoncus dapibus. Suspendisse potenti. Nulla a massa nec tellus feugiat semper. Mauris convallis ultrices odio. Nam ut ipsum vitae est tincidunt egestas. Maecenas justo. Pellentesque eleifend facilisis diam. Mauris vulputate tempus dui. Proin eleifend. Vestibulum mattis auctor arcu. Cras diam. Nam id erat id elit sagittis consectetuer. Integer vulputate justo a quam. Praesent vel est. Praesent pretium turpis at massa.</p>					</div>					<div class="box5">						<p>Praesent placerat, quam ut commodo feugiat, elit orci elementum enim, venenatis varius ligula lectus in metus. Praesent aliquam. Integer et lacus in arcu mattis malesuada. Nunc sed odio euismod lacus nonummy malesuada. Fusce nibh. Sed sed lacus. Donec suscipit feugiat mauris.</p>						<p>Duis a est quis odio imperdiet aliquam. Proin cursus enim vel lorem. Suspendisse potenti. Etiam nonummy nulla non sapien. Cras feugiat diam ac arcu. Vivamus vel urna. Pellentesque quis velit.</p>					</div>				</div><!-- end: rightcolumn -->			<!-- start: footer -->				<div id="footer">					<p>Phasellus dapibus nulla et lacus. Nam non urna vitae libero molestie vehicula.</p>				</div><!-- end: footer -->			</div>		</body></html>

[S@m]

FooterStickAlt works.http://www.themaninblue.com/experiment/footerStickAlt/At just a quick glance, does your body content push the footer down? I see that your footer is 22px high, you need to incorporate that into your layout. Like add 22px (or more) padding to the content area.

[newseed]

The placement of your footer is wrong and you need to change a few things in the css:HTML:Change just the bottom portion of HTML code to look like this by moving the footer div to the outside of the last closing div:

<!-- end: rightcolumn -->	</div><!-- start: footer -->	<div id="footer">	<p>Phasellus dapibus nulla et lacus. Nam non urna vitae libero molestie vehicula.</p>	</div><!-- end: footer -->

CSS:

div#footer {	background-color: #5ddbd7;	border: 1px solid #82634e;/*changed*/	bottom: 0;	height: 26px;	position:relative;/*changed*/	width: 852px;	margin:0 auto;/*added*/	}

Works in FF but I have not tested in IE.