CSS for footer full width of screen

Getting a footer to go the full width of a screen is a painful exercise if you have never done it or have only done it a few times. After doing a lot of searching on the internet for a div and css solution followed by 2 hours of playing around I have found one that works in all browsers including Internet Explorer, FireFox and Safari. It is CSS 2.0 compliant code so it may not work on older browsers.

The following code is what you should try:

Style.css

at the top of the file have the following:

#ext-wrapper {
bottom:25px;
min-height:200px;
width:100%;
}
#wrapper {
left:50%;
margin-left:-475px;
min-height:100%;
position:absolute;
width:950px;
}

At the bottom of the css file where you are handling your footer css:

/*Footer Related*/

#wrapper {

position: relative;

min-height: 80%;

}

#ext-footer-wrapper {

background-color:#eaf1f2;

border-top:10px solid #e1ebec;

bottom: 0px;

float:left;

min-height:-100%;

padding:20px 0 0 0px;

position:relative;

width:100%;

}

In your html file:

<div id=”ext-wrapper”>

<div id=”wrapper”>

</div>

</div>

<div id=”ext-footer-wrapper”>

<div id=”wrapper”>

 

</div>

</div>