Can't get my footer to the bottom

HTML & CSS
1

Hi, I have just agreed to do a site for my mum and after a few years break from any web design I find that the new way to do things is using CSS.

Things were going ok until I try to add a footer to my site that hugs the bottom of the page and sits below the content. I get the bar to appear but its floats half way down the left floated column in the main section below the text.

I am hoping that I am missing something obvious. I have included code below. I apologise if its a bit scrappy a combination of me learning and having messed around to try and get this working.

body {
  background-color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  min-height: 100%;
}

html, body {
height: 100%;
}

div#wrapper {
  position: relative;
  width: 800px;
  min-height: 100%;
  height:100%;
  background-color:#FFFFFF;
  margin: 0 auto;
  padding: 0px;
}

* html #wrapper {
height: 100%;
}

div#header {
  padding: 0px;
  margin: 0px;
  text-align: left;
}

div#navbar {
  display: table;
  height: 20px;
  width: 800px;
  text-align: right;
  background-color: #d10e2c;
  padding: 0;
  margin:0 auto;
}

* html div#navbar {
  display:inline-block;    
  width: 800px;               
  padding:0 2px;
  }

div#navbar ul {
  margin: 0;
  padding: 0;
  font-size: medium;
  color: #FFF;
  line-height: 20px;
  white-space: nowrap;
}

div#navbar li {
  list-style-type: none;
  display: inline-block;
  display; table-cell;
}

* html div#navbar li {
  display:inline;         
  }

div#navbar li a {
  display: block;
  text-decoration: none;
  padding: 7px 10px;
  color: #FFF;
  text-align: center;
  border-left: solid #FFF 2px;
  margin:0 -2px;
}

* html div#navbar a {
  display:inline-block;     
  margin:0 -2px;             
  }

div#navbar li a:link {
  color: #FFF;
}

div#navbar li a:visited {
  color: #FFF;
}

div#navbar li a:hover { 
  color: #FFF;
  background-color:#8662b3;
}
  
div#leftbar {
  width: 15%;
  padding: 0px;
  margin-top: 15px;
  float: left;
  text-align: left;
  padding-bottom: 30px;
}

div#main {
  margin-left: 17%;
  margin-top: 1px;
  padding: 0px;
  text-align: justify;
  padding-bottom: 30px;
}

div#footer {
   clear: both;
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 30px;   
   background: #6cf;
   text-align: center;
}

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <title>Jacqui Atkin - Home</title>
  <meta name="generator" content="Amaya, see http://www.w3.org/Amaya/" />
  <link href="Basic.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<img alt="" src="Title.png" /> 
<div id="navbar">
<ul>
  <li><a href="Home.html">Home </a></li>
  <li><a href="Gallery.html">Gallery </a></li>
  <li><a href="Contact.html">Contact </a></li>
  <li><a href="Outlets.html">Outlets </a></li>
</ul>
</div>
</div>
<div id="leftbar">
<img alt="" src="sb2.png" />
</div>
<div id="main">
<p> some text </p>
</div>
<div id="footer"></div>
</div>
</body>
</html>

Thanks.

2

Well, Paul O’Brien, our resident guru, assures us that it’s the only method that works in all browsers, so that’s no surprise! Glad that helped. I felt a bit bad just sending you to a link, but the fact that you worked out the solution by yourself is great, and is to your own benefit anyway!

Well done. :slight_smile:

3

Cheers worked like a charm that must have been the only method on the whole of the internet that i didn’t try.

That’s life I suppose.

4

Seems I spoke too soon.

I have the code working for my main page with a two column layout layout and text in the main section. When I copy the page and change the main section to contain a div to show a gallery of images with a pop up it breaks the footer somehow.

here is the code to display the gallery, can you see what might be causing the issue?

It has reached half past midnight here and my eyes can not focus any more so I am going to sleep on it and fiddle more tomorrow.


/*************************
Gallery Code
*************************/

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

div#gallerycontainer{
  position: relative;
  height: 400px;
}

.thumbnail img{
  border: 1px solid white;
  margin: 0 5px 5px 0;
}

.thumbnail:hover{
  background-color: transparent;
}

.thumbnail:hover img{
  border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
  position: absolute;
  background-color: transparent;
  padding: 0px;
  left: -1000px;
  border: 0px;
  visibility: hidden;
  color: black;
  text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
  border-width: 0;
  padding: 0px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
  visibility: visible;
  top: 0;
  left: 360px; /*position where enlarged image should offset horizontally */
  z-index: 50;
}


<div id="gallerycontainer">
          <a class="thumbnail" href="#thumb">
            <img src="images/s001_thumb.png" width="100px" height="133px" />
            <span><img src="images/s001.png" /></span>
          </a>
</div>
5

Hi AtkinA, welcome to SitePoint! :slight_smile:

Unfortunately, “sticky footers” (as they are called) are not easy with CSS. There is, however, a tried and tested method, which is detailed in this thread from the CSS faq:

It’s worth reading through that. See if it helps, and then please post back if you have any questions. :slight_smile: