Stay down footer!

March 20, 201412 yr

Hey all, hope someone can help, having a little trouble keeping my footer at the bottom of the page.

Have read numerous fixes for this but none seem to be helping. I need the footer to stay at the bottom of the page, regardless of how much content there is on the page.

Can anyone point me towards a decent fix?

Here's my code if interested . . .

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700,300,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
</head>

<body>

<header>
  <div id="bar">
    <div id="bar-wrap" class="clear"><p id="quote-info">Get a quote now<a href="tel:012345678910">01234 567 8910</a></p></div>
  </div>
  <div id="header-wrap" class="clear">
    <a href="index.html" id="brand">JJs <span id="limos">Limo Hire</span></a>
    <nav id="header-nav">
      <ul>
        <li><a href="about.html">About Us</a></li>
        <li><a href="cars.html">Our Cars</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

<section>
  <div id="section-wrap">
    <div id="tagline">
      <h1>We get you there in style</h1>
      <p>We've been providing Essex with fine looking, chauffeur driven vehicles since 2006</p>
      <a href="#" class="button">More about us »</a>
    </div>
  </div>
</section>

<main>
  <div id="main-wrap">
    <div class="services clear">
      <h1>Stand out from the crowd</h1>
      <ul>
        <li>
        <img src="images/balloons.png" width="80" height="80" title="" alt=""/>
          <h2>Availability</h2>
          <p>Operational 24 hours a day, 7 days a week, 364 days of the year.</p>
        </li>
        <li>
          <img src="images/balloons.png" width="80" height="80" title="" alt=""/>
          <h2>Areas</h2>
          <p>Every square inch of Essex covered and parts of London too.</p>
        </li>
        <li>
          <img src="images/balloons.png" width="80" height="80" title="" alt=""/>
          <h2>Events</h2>
          <p>Any occasion catered for. Prom? Wedding? You name it, we do it.</p>
        </li>
        <li>
          <img src="images/balloons.png" width="80" height="80" title="" alt=""/>
          <h2>Prices</h2>
          <p>All quotes we provide are tailor made to suit your needs.</p>
        </li>
      </ul>
    </div>
    <a href="#" class="button">See our cars »</a>
  </div>
</main>

<footer>
  <div id="footer-wrap">
    <nav>
      <ul id="footer-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="vehicles.html">Our Vehicles</a></li>
        <li><a href="faq.html">FAQ</a></li>
        <li><a href="terms.html">Terms</a></li>
        <li><a href="feedback.html">Feedback</a></li>
        <li><a href="sitemap.html">Sitemap</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="#" class="social">Facebook</a></li>
        <li><a href="#" class="social">Twitter</a></li>
      </ul>
    </nav>
    
    <p id="copy">JJs Limo Hire © | 2006 – 2014</p>
  
  </div>
  
</footer>

</body>
</html>

body {
	font-family: 'Open Sans', sans-serif;
	background-color: #3CF;
	min-height: 100%;
}

p {
	font-weight: 300;
	font-size: 18px;
}

h1 {
	font-size: 34px;
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 24px;
}

#bar-wrap,
#header-wrap,
#section-wrap,
#main-wrap,
#footer-wrap {
	max-width: 1200px;
	margin: 0 auto;
}

#bar-wrap {
	color: #fbfbfb;
}

#about-wrap {
	max-width: 600px;
	margin: 0 auto;
}

.highlight {
	font-weight: bold;
}

#bar {
	width: 100%;
	background-color: #333;
}

a[href^="tel"] {
	color: #45aab8;
	margin-left: 8px;
}

header {
	width: 100%;
	/*height: 140px;*/
	background-color: #fbfbfb;
}

#quote-info {
	float: right;
	padding: 10px 3px;
}

#brand {
	font-size: 38px;
	font-weight: 700;
	float: left;
	color: #bca95b;
	/*margin-top: 22px;*/
	padding: 20px 0;
}

#limos {
	color: #333;
	font-weight: 300;
	letter-spacing: -1px;
}

#header-nav {
	float: right;
	padding: 20px;
}

#header-nav li { 
	display:inline;
	font-size: 18px;
	letter-spacing: -0.50px;
	margin-right: 40px;
}

#header-nav li:last-child {
	margin-right: 0;
}

#header-nav a {
	color: #333;
}

section {
	width: 100%;
	background: #666 url(../images/bg.jpg) no-repeat center;
	background-size: cover;
	height: 100%;	
}

#tagline {
	height: 100%;
}

#tagline h1 {
	font-size: 60px;
	text-align: center;
	color: #fbfbfb;	
	margin: 0;
	padding: 80px 0 40px;
}

#tagline p {
	font-size: 18px;
	text-align: center;
	color: #fbfbfb;
	letter-spacing: 0.5px;
	padding-bottom: 60px;
}

main {
	width: 100%;
	background-color: #fbfbfb;
	padding-bottom:30px;
}

#main-wrap h1 {
	margin: 0;
	padding: 30px 0;
	text-align: center;
}

.button {
	background-color: #bca95b;
    background-image: -webkit-linear-gradient(top, #bca95b, #9c8d50);
    background-image: -moz-linear-gradient(top, #bca95b, #9c8d50);
    background-image: -ms-linear-gradient(top, #bca95b, #9c8d50);
    background-image: -o-linear-gradient(top, #bca95b, #9c8d50);
    background-image: linear-gradient(to bottom, #bca95b, #9c8d50);
	border-radius: 6px;
	-webkit-border-radius: 6;
	-moz-border-radius: 6;
	display: block;
	width: 120px;
  	color: #fbfbfb;
  	font-size: 15px;
	font-weight: 200;
  	padding: 14px 11px;
  	text-decoration: none;
	margin: 90px auto 50px;
}

#main-wrap a.button {
	margin: 40px auto 20px;

}

a.button {
	text-align: center;
}

.services ul {
	list-style-type: none;
	padding: 0;
	margin: 0 auto;
	max-width: 1200px;
}

.services li {
	float: left;
	width: 270px;
	margin: 20px 40px 40px 0;
	text-align: center;
	/*background-color: #96C;*/
}

.services li:last-child {
	margin-right: 0;
}

.services h2 {
	margin-bottom: 3px;
}

.services p {
	max-width: 200px;
	margin: 0 auto;
}

/* ==============================
	      footer
   ============================== */

footer {
	background-color: #333;
        width: 100%;	
}

#footer-nav {
	font-weight: 300;
	font-size: 14px;
	text-align: center;
	margin-top: 0;
	padding: 20px 0;
}

#footer-nav li {
	display: inline;
	margin-right: 30px;
}

#footer-nav li:last-child {
	margin-right: 0;
}

#footer-nav li a.social {
	color: #45aab8;
}

#footer-nav a {
	color: #fbfbfb;
}

#copy {
	font-size: 10px;
	text-align: center;
	color: #fbfbfb;
	padding-bottom: 3px;
}

/* ==============================
			clear floats
   ============================== */

.clear:before,
.clear:after {
    content: " "; 
    display: table; 
}

.clear:after {
    clear: both;
}

.clear {
    zoom: 1;
}

Thanks in advance,

James

March 20, 201412 yr

sticky footer

March 21, 201412 yr

You just give the footer position fixed, then set the left, right, bottom properties to 0. Although if your footer is anything other than tiny in height it could result in a poor user experience. I use fixed navs very frequently but Always take care to make sure they take up as little screen real estate as possible, especially on smaller screened devices.

March 21, 201412 yr

You just give the footer position fixed, then set the left, right, bottom properties to 0. Although if your footer is anything other than tiny in height it could result in a poor user experience. I use fixed navs very frequently but Always take care to make sure they take up as little screen real estate as possible, especially on smaller screened devices.

This is not practical if the content will sometimes overflow the viewpoint height.

I think sticky footer is the easiest thing to do.

Edited March 21, 201412 yr by jakdothtml

March 21, 201412 yr

That doesn't make any sense. What i posted is a sticky footer. Or do you mean something else?

March 22, 201412 yr

That doesn't make any sense. What i posted is a sticky footer. Or do you mean something else?

My bad, I think I mis-interpreted your answer. Will try it out and see if I was barking up the wrong tree.

March 22, 201412 yr

<style>

body{ margin:0}

.main{ width:950px; margin:0 auto; box-shadow: 0 0 5px #333;}

.header{ height:120px; background:#9c0;}

.section{ height:300px; background:#efefef;}

.content{ min-height:500px}

.footer { height:70px; background:#9cf;}

</style>

</div>

</div>

</div>

</div>

***********************************************************************************

I suggest use similar structure which will bind your element nicely.

Use min-height with the main div and it will handle your data nicely.

July 2, 201412 yr

Author

Okay so I've changed my CSS to the following . . . (kinda following from this example http://www.cssstickyfooter.com/)

@media screen and (min-width: 1024px) {

#bar-wrap,

#header-wrap,

#footer-wrap,

#main-wrap,

#section-wrap {

max-width: 960px;

}

main {

padding-bottom: 150px;

}

footer {

position: absolute;

bottom: 0;

width: 100%;

height: 100px;

margin-top: -150px;

}

footer ul {

margin: 0 auto;

text-align: center;

}

footer ul li {

display: inline-block;

margin-right: 2.0833333%; /* target(20)/context(960)=total(2.0833333) */

padding: 4px;

}

#services li {

width: 21%; /*total width-padding=100-16=84/4=21*/

}

#services li:nth-child(3n) {

clear: none;

}

but, it still doesn't seem to be sitting at the very bottom?

Just to clarify, my structure is . . .

<body>

<header>
  <div id="bar">
    <div id="bar-wrap" class="clear">
    </div>
  </div>
  <div id="header-wrap" class="clear">
    <div id="logo">
    </div>
    
    <nav>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </nav>
  </div>
</header>

<section>
  <div id="section-wrap">
  </div>
</section>

<main class>
  <div id="main-wrap">
  </div>
</main>

<footer>
  <div id="footer-wrap">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div id="copy">
    </div>
  </div>
</footer>

</body>

and I've uploaded what I'm working on at http://www.sleepylabs.co.uk just to make it easier for you to see what's happening (Note - I'm currently looking at this on a 23" monitor)

I'm obviously balls-ing something up so any pointers would be brilliant guys and girls.

Thanks

James

July 2, 201412 yr

You NEED position:fixed with the relevant left right and bottom attributes. Position absolute will not make a sticky footer.

July 2, 201412 yr

And don't use Ids for styling. You can achive the same with classes and youll save yourself potential specificity headaches down the line.

July 2, 201412 yr

Author

You NEED position:fixed with the relevant left right and bottom attributes. Position absolute will not make a sticky footer.

But I don't want the footer fixed to the bottom of the browser window, I want it fixed to the bottom of the page?

July 2, 201412 yr

Author

And don't use Ids for styling. You can achive the same with classes and youll save yourself potential specificity headaches down the line.

Note taken, thanks rob :good:

July 3, 201412 yr

The footer is at the bottom of the page when I view it. That is pretty standard document flow. I don't quite understand what the problem is.

EDIT

If you are on some really tall screen then I'd just use javascript in this case:

get the height of your screen, then get the height of your content, then get the height of your footer. If the height of the content + the footer < the screen height then position the footer absolute, set the bottom property to 0. while at the same time making sure that your body and html elements have 100% height attributes.

You need to use the JavaScript because if you have smaller screens the footer will begin to cover the other elements.

In my projects where I want to do something similar I just give the main content a minimum height so you always have to scroll a little to get to the footer, but of course this doesn't work on huge screens, but then not many visitors will view on these and those that do even fewer of those will care.

Edited July 3, 201412 yr by rbrtsmith

July 3, 201412 yr

Author

I had set the footer to absolute and body and html are already set to 100% but the footer was still not quite touching the bottom of the page (you could see the body colour below the footer).

I've just done what you said for now, I gave my main element a min-height and also made my footer a little higher which seems to have done the trick (looking on my 23" screen).

This just seems to me more like a 'bodge' rather than a fix. I mean, if we should be looking at responsive design these days we never know what device/size screen our sites are being viewed on therefore the min-height I set will obviously not work on any screens bigger than a 23"?

Thanks for your help though Rob, definitely helped with my headache.

James

July 3, 201412 yr

Just thought Id add that for sass/compass users there is a mixin that will make the footer stick to the bottom of the

http://compass-style.org/reference/compass/layout/sticky_footer/

Stay down footer!

Featured Replies

Create an account or sign in to comment

Similar Content

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)