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.

I had the usual divs. A container, header, sidebar, main content and footer. To get the footer correctly aligned, I put the sidebar, main content and footer within a wrapper div, which was within the container. I had the sidebar and main content on float:left. I then had the footer on float right so it went all the way to the side of the wrapper (not the container) and was almost correctly aligned with the main content above (I just used the margin-right command to tweak it to the correct position. I also gave the footer a size in the css which stopped the content simply overlapping the previous main content element. I will post a screenshot and some of the code below for you to look at. Feel free to leave some comments. If you’re a professional in this business then please explain your remarks whether positive or negative as it will help us newbies.

Finished product

HTML

<body>
<div id=”container”>
<div id=”header”>
<img class=”head” src=”/images/HD.png” />
</div>
<div id=”wrapper”>
<div id=”sidebarnav”>
<ul id=”list1″>
**LINK REMOVED**
</ul>
</div>
<div id=”maincontent”>
<div id=”sidea”>
<h2>Beautiful Handmade and Decorated Cakes</h2>
<h4>I have had a passion for decorating cakes for as long as I can remember. I originally started decorating for family and friends as a hobby.</h4>
<p class=”info”>Testing 1 2 3</p>
<p class=”info”>Testing 4 5 6</p>
<p class=”info”>Testing A B C</p>
<p class=”info”>Testing X Y Z</p>
<p class=”info”>Testing 1 2 3</p>
<p class=”info”>Testing 4 5 6</p>
<p class=”info”>Testing 1 2 3</p>
<p class=”info”>Testing 4 5 6</p>
<p class=”info”>Testing A B C</p>
<p class=”info”>Testing X Y Z</p>
<p class=”info”>Testing 1 2 3</p>
<p class=”info”>Testing 4 5 6</p>
</div>
<div id=”sideb”>
**LINKS REMOVED**
</div>
</div>
<div id=”footer”>
<p class=”credits”> © <a href=”**LINK REMOVED**”>unorthodox designs</a> 2012 | A Rich and Rowena Production.</p>
<ul id=”list2″>
**LINKS REMOVED**”
</div>
</div>
</div>
</body>
</html>

CSS

body {background-image: url(“**LINK REMOVED**”);background-repeat: no-repeat; background-position:center top; height:100%; width:100%;}
#container {width:1200px; height:1000px; margin:0 auto;}
#header {width:1200px; height:160px;}
img.head {display: block; margin-left: auto; margin-right: auto;}
#wrapper {width:1100px; height:100%;}
#sidebarnav {float:left; margin-left:100px; width:200px;}
#list1 {list-style:none;}
#list1 a {display:block; width:200px; height:30px;}
#list1 a:link {text-decoration:none; color:#FFFFFF;}
#list1 a:visited {text-decoration:none; color:#FFFFFF;}
#list1 a:hover {text-decoration:none; color:#AEAEAE;}
#list1 li {font-family: Arial, Verdana, sans-serif; width:200px; height:30px; background-color:#7D1B7E; margin-bottom:2px; padding-left:5px;}
#list1 li:hover {background-color:#3B1947;}
#maincontent {float:left; margin-left:50px; width:700px; height:1000px; background-color:#FFFFFF;}
#sidea {width:375px; float:left; padding-left:15px; padding-top:25px;}
h2 {color:#7D1B7E;}
h4 {color:#4C78C4;}
p.info {display:block; float:left; width:250px; margin-bottom:15px; margin-top:15px; padding-top:10px; padding-right:25px;}
#sideb {width:275px; float:right; padding-top:25px;}
img.mcon {display:block; float:right; width:250px; margin-bottom:15px; padding-top:10px; padding-right:25px;}
mpng {float:right; width:250px; margin-bottom:15px; padding-top:10px; padding-right:25px;}
#footer {float:right; width:690px; height:100px; margin-right:50px; padding-left:10px;}
p.credits {margin-left:137px;}
#list2 {list-style:none; margin-left:75px;}
#list2 li {display:inline; margin-left:10px; margin-right:20px;}
#list2 li a {text-decoration:none;}

More Web Design info

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

Related Posts

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

Leave a Reply Cancel reply

Translate

Categories

Latest Posts

Search the Site