Solved

CSS Footer Help

Posted on 2014-03-23
4
374 Views
Last Modified: 2014-04-15
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
Content
Footer 1 - 900px wide
5px empty space
Sticky Bottom Footer

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

<body>

<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
</div>
<!-- .footer1 -->

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

</body>
</html>

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

0
Comment
Question by:-TNT-
  • 2
4 Comments
 
LVL 10

Expert Comment

by:aboo_s
ID: 39949007
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;
0
 
LVL 58

Expert Comment

by:Gary
ID: 39949070
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
e.g.
http://www.cssstickyfooter.com/
0
 

Author Comment

by:-TNT-
ID: 39949244
As the code is now, one that is always at the bottom but another footer with a 5px space between the two.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39949261
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
e.g.

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

If you say footer enough times it starts to look stupid
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
xml xsd validation free tool to download 10 85
PHP Sort Order 5 72
Getting attribute Values using xslt 4 46
Field that has HTML displays the code instead of the text in html 16 76
Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question