CSS Footer Help

I am trying to learn CSS and am having the hardest time wrapping my head around a simple setup. I am looking to make this super clean. What am I missing

Header 100px
Footer 1 - 900px wide
5px empty space
Sticky Bottom Footer

<!DOCTYPE html>
	<meta charset="utf-8" />
	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link href="style.css" rel="stylesheet">


<div class="wrapper">

	<header class="header">
	  <div align="center"><strong>Header</strong></div>
	</header><!-- .header-->

	<main class="content">
		<strong>Content:</strong> Main Content Goest HERE 
	</main><!-- .content -->

</div><!-- .wrapper -->

<div class="footer1">
	<strong>Footer:</strong> Footer 1 Content Goes Here
<!-- .footer1 -->

<footer class="footer">
	<strong>Footer:</strong> Bottom Footer that is stuck to the bottom goes here
</footer><!-- .footer -->


Open in new window

/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
body {
	line-height: 1;
ol, ul {
	list-style: none;
blockquote, q {
	quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
table {
	border-collapse: collapse;
	border-spacing: 0;
/* End of Eric Meyer's CSS Reset */

html {
	height: 100%;
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
body {
	font: 12px/18px Arial, sans-serif;
	/* [disabled]height: 100%; */
.wrapper {
	min-width: 900px;
	/* [disabled]max-width: 1500px; */
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;

/* Header
.header {
	height: 100px;
	background-color: #E9E8E3;

/* Middle
.content {
	padding: 0 0 200px;

/* Footer1
.footer1 {
	min-width: 900px;
	max-width: 900px;
	margin: auto;
	height: 100px;
	background-color: #86ED1E;
	position: relative;
	padding-top: 100px;
	padding-right: 100px;
	padding-left: 100px;
	padding-bottom: 100px;
	min-height: 100px;
	border-collapse: separate;
	border: thin solid #000000;
	border-spacing: 2px 2px;
	border-radius: 5px;

/* Footer
.footer {
	margin: -100px auto 0;
	min-width: 900px;
	/* [disabled]max-width: 1500px; */
	height: 100px;
	background-color: #8C8F89;
	position: relative;

Open in new window

Who is Participating?
GaryConnect With a Mentor Commented:
Don't have time to go thru the CSS now.
Put everything in your FOOTER element.
Recreate your footer code inside the footer element - i.e. do not style the footer
Increase the footer height to the height of the footer1 and footer elements plus 5px and then give footer1 a bottom margin of 5px

     <div class="footer1">...</div>
     <div class="footer">...</div>

If you say footer enough times it starts to look stupid
well if you want footer to be always in the bottom, one way to go about it (not the best though, but real fast) is to nail it there with afixed position.
position:absolute; bottom:0px;
Do you want a footer that is always at the bottom of the browser or one that flows with the page as normal but when there is not enough content it stays at the bottom of the browser
-TNT-Author Commented:
As the code is now, one that is always at the bottom but another footer with a 5px space between the two.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.