[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

CSS Footer Help

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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

649 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