corysimmons/fixed_footer.css

## fixed_footer.css
/* Not important */
* {
    font-family:Verdana, sans-serif;
    margin:0;
    padding:0;
}

/* Set min-height to 100% then position:absolute so it actually sets your height to 100% */
/* _height is for IE6, because it's a really viable browser to still use all the time */
body {
    position:absolute;
    min-height:100%;
    _height:100%;
}

/* Margin-bottom equal (or slightly bigger) to your #footer's height */
/* Display:block makes it so it doesn't overlap */
#wrap {
    background:yellow;
    margin-bottom:100px;
    display:block;
}

/* Position:absolute bottom:0 to put the footer on the bottom */
/* Height:100px because that's how big you want it... */
/* Remember to set width to 100% on some of these elements or you can't work with them */
#footer {
    background:red;
    position:absolute;
    bottom:0;
    height:100px;
    width:100%;
}

## fixed_footer.html
<html>
    <body>

        <!-- This wraps all your content and sets a margin on the bottom for your footer to hang out in -->
        <div id="wrap">

            <!-- PUT YOUR CONTENT IN HERE!!! -->
            <h1>Hello Fixed Footer!</h1>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </p>

        </div>

        <!-- Your footer has to be outside your #wrap -->
        <div id="footer">
            <p>I'm just a footer too!!!</p>
        </div>

    </body>
</html>
	/* Not important */
	* {
	font-family:Verdana, sans-serif;
	margin:0;
	padding:0;
	}

	/* Set min-height to 100% then position:absolute so it actually sets your height to 100% */
	/* _height is for IE6, because it's a really viable browser to still use all the time */
	body {
	position:absolute;
	min-height:100%;
	_height:100%;
	}

	/* Margin-bottom equal (or slightly bigger) to your #footer's height */
	/* Display:block makes it so it doesn't overlap */
	#wrap {
	background:yellow;
	margin-bottom:100px;
	display:block;
	}

	/* Position:absolute bottom:0 to put the footer on the bottom */
	/* Height:100px because that's how big you want it... */
	/* Remember to set width to 100% on some of these elements or you can't work with them */
	#footer {
	background:red;
	position:absolute;
	bottom:0;
	height:100px;
	width:100%;
	}
	<html>
	<body>

	<!-- This wraps all your content and sets a margin on the bottom for your footer to hang out in -->
	<div id="wrap">

	<!-- PUT YOUR CONTENT IN HERE!!! -->
	<h1>Hello Fixed Footer!</h1>
	<p>
	Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	</p>

	</div>

	<!-- Your footer has to be outside your #wrap -->
	<div id="footer">
	<p>I'm just a footer too!!!</p>
	</div>

	</body>
	</html>