?
Solved

CSS Footer Help

Posted on 2014-03-23
4
Medium Priority
?
385 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 2000 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

809 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