How to make a footer stay at the bottom of the page in HTML and CSS

Tuesday 21st August 2012

I am fairly new to HTML and very new to CSS but I’m slowly getting the idea of how they gel. Upon practicing with web site construction I have found it easy to set up the html building blocks and style them with css. However, every time I come to the footer I always have problems, such as it going to the right of a sidebar or just under the header, or overlapping another element . I have searched many times for solutions online and some don’t work while others seem far too complicated for me to understand, and understand I must if I want to make a living from this market sector. Therefore I have started experimenting. The first attempt at aligning a footer was amateur but effective, if you take a look at my previous web design post (by clicking the web design category) you will see what I mean. I have since progressed from there. I was building a site for a friend and he needed a footer to align nicely at the bottom of the page but only under the main written content section. This made my job even more complicated but I pulled it off and here is how.
Continue reading