Egyptian blogger from Cairo.
Revolutionary Socialist.
Partner & Creative Director at ThePlanet.

The Ideal Footer Development

You can fool yourself into thinking that not all websites are created equal, and that you will design and develop one that expands beyonds the limits of the traditional two/three-column layout with a header and a footer. Sadly, though, the layout has become the victim of a rigid system used globally. Having said that, I wanted to talk about the development of the footer.

In many cases, the design of the homepage has just enough content to leave the footer sitting pretty at the bottom. However, there are always pages with fewer content, meaning there’s an awkward space beneath the footer (between the footer and the edge of the browser). This obviously needs to be taken care of, and in most cases, developers would place a minimum height on the main content div. That’s great, but that also means that visitors with a small screen size will have to scroll for the footer, even though there is no content – not the ideal solution.

That’s where CSS Sticky Footer comes in. IT is basically the XHTML and CSS solution to the problem. It prevents the footer from floating to the middle of the screen when there is not enough content, and at the same time, remains below the main content div when there is enough text and images to surpass the height of the browser window.

How to use it

Very simple, really. The markup looks as such:

<div id="wrap">
   <div id="main" class="clearfix">
      Main content goes here...
   </div>
</div>
<div id="footer">
   Footer content goes here..
</div>

After that the CSS will look like this:

* {
   margin:0;
   padding:0;
} 

html, body, #wrap {
   height: 100%;
   }

body #wrap {
   height: auto;
   min-height: 100%;
}

#main {
   padding-bottom: 150px;
}  /* must be same height as the footer */

#footer {
   position: relative;
   margin-top: -150px; /* negative value of footer height */
   height: 150px;
   clear:both;
} 

/* CLEAR FIX*/
.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

.clearfix {
   display: inline-block;
}

Warning! The first class is there to get rid of the margins. If you are using a reset like the 960 Grid System, as you should, you will already have the reset classes laid out. That is because using the asterisk technique is not recommended at all – it takes longer to render, and doesn’t handle the reset comprehensively. For that reason, if you already have a reset, do not use that first class.

Do that, and you will have the idea footer development, regardless of the size of the content on the individual pages.

Related posts

Leave a reply