Footer positioned at bottom of browser

HTML & CSS
1

Hi All,

Im trying to have a footer positioned at the bottom of the browser window but not sure how to go about it.
I want the image to repeat-x across the bottom of the whole browser window, but the text in the footer to be the width of the container (1000px) with has a margin:auto on each side so is centred in the middle.

I also need it to work in Safari, FF & IE and the content on the homepage isnt long enough to just put it under it (if this makes sense!).

Heres what ive tried (only tested in safari & FF) but the text isnt in the centre plus the footer seems to be positioned LOWER than the bottom of the window:

CSS:


html, body {
    height: 100%;
}

#container {
width:1000px;
position: relative;
min-height: 100%;
margin-left:auto;
margin-right:auto;
padding:0;
}

#footer{
clear: both;
height: 120px;
background-image:url(images/footer.jpg);
background-repeat: repeat-x;
position: bottom;
padding: 0;
margin: 0; 
} 


#footer_text{
max-width:1000px;
margin-left: auto;
margin-right: auto; 
float:left;
}

html:


<div id="container">
<div id="content">...
</div>
</div>
 <div id="footer">
    	<div id="footer_text">test footer text
    	</div>
    </div>

Any ideas?
Thanks in advance!

2

Hi Maree,

Here’s a great tutorial that explains how to do this:

See if that helps and post back if you have any questions. :slight_smile: