Solved

CSS Footer Help

Posted on 2014-03-23
4
377 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-
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
selectSingleNode in Access 2013 11 78
how to extract window origin in spring 2 82
Problem to page 4 103
Facebook React and SyntheticEvents 6 81
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
In this article you will learn how to create a free basic website on Bitbucket, a git service provider. Polymer creates dynamic HTML components, which allow more flexibility than static HTML. This tutorial uses Ubuntu Linux but can also be done on W…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

734 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