Tag Archives: footer

CSS: How to Force a Footer DIV to Stick to the Bottom of a Page Programming 06 AUG 2013

css ninja t-shirtWeb page design at the moment has very much settled on the layout of header, content and footer panels. For this particular quick tutorial I’m going to show you how to very simply force your footer div to ‘stick’ to the bottom of the page, meaning that even for pages that are very light on content, your happy little footer bar will remain firmly at the bottom of the browser window, instead of hanging about and looking silly in the middle of the page.

As it turns out, achieving this is relatively simple and the technique can easily be applied to existing websites if necessary. So what needs to be done then?

Well for a start, you need to declare the following CSS rules:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom matches your desired footer height */
}
#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

And that’s pretty much it. Here’s some sample HTML code to see how it would appear in action:

<!DOCTYPE html>
<head>
    <title>Hello World</title>
</head>
<body>
    <div id=header>Hello World</div>
    <div id=content>Lorem ipsum...</div>
    <div id=footer>My Footer</div>
</body>
</html>

This works in IE8+, Chrome, Firefox, and Opera.

Joomla 1.5: Remove Copyright Info from the Bottom of the Page Footer Tips, Tricks and Tutorials 19 AUG 2010

Most Joomla sites, with or without snazzy templates applied, all carry a pretty standard Powered by Joomla! footer text.

Now while most people should be in favour of keeping this in, there are a lot of us out there who simply don’t want it spoiling our tight site design, and so digging around the web revealed the two simplest ways of removing this line of text from your website.

First, you could actually edit the core files of your Joomla 1.5 installation directly. To do this, go to the core files, navigating through core files >> Languages >> en-GB.mod_footer.ini.

Opening this file you will see the lines:

FOOTER=Footer
FOOTER_LINE1=Copyright © %date% %sitename%. All Rights Reserved.
FOOTER_LINE2=Joomla! is Free Software released under the GNU/GPL License.
MOD_FOOTER=mod_footer
THIS MODULE SHOWS THE JOOMLA! COPYRIGHT INFORMATION=This Module shows the Joomla! Copyright information

Simply change the data to what you would like to display and voila – you are done! :)

A second way is to modify your template file located at yourtemplate/index.php – scroll to the bottom, locate the lines below and change accordingly:

<a href="http://www.joomla.org">Joomla!</a> <a href="http://validator.w3.org/check/referer">XHTML</a>  <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>

And that is literally that. Nifty.