HTML 5 Footer tag be always at bottom

W

6

20

I am developing a site in HTML 5. I wrap all my footer content in footer tag. Like code below

<!DOCTYPE html>

<html>
<head></head>
<body>
<header>
<h1>Talking Dogs</h1>
<b><p>Humans aren't the only talkers!</p></b>
</header>
<article>
<p>Ever encountered a talking dog? I have.</p>
<p>It all happened one day as I was walking down the street...</p>
</article>
<footer>
© 2009 Woofer Dog Corporation
</footer>
</body>
</html>

However above code is not the actual site code as i can not share. Can someone please suggest me the best way to do this in HTML 5 so that it work on all major browsers like IE-6,7,8 / Firefox/ Safari / Crome / Opera

Watters answered 11/11, 2010 at 12:7 Comment(0)

P

37

HTML5's footer tag doesn't magically put the contents at the foot of the page -- you still have to style it just as you always have. In that respect, it works exactly like a <div>, so you should treat it as such by specifying CSS to make it display as intended:

footer {
   //CSS code to make it display at the bottom, same as you would have done for a div.
}

Footers attached to the bottom of the page are known as "Sticky Footers". You can find more info about how to achieve the effect here: http://www.cssstickyfooter.com/

The <footer> tag itself (along with all the other new HTML5 tags) is not there to do layout magic but for semantic purposes; ie to make it clear to someone reading the code (or more likely a bot) that the data inside the tag is footer data.

In terms of browser support, all current browsers will allow you to specify the new HTML5 tags except IE, but fortunately all versions of IE (even IE6) can be forced to allow it by including the HTML5Shiv hack in your page.

Hope that helps.

Pulpy answered 11/11, 2010 at 12:47 Comment(2)

Thanks a lot Spudley. This link did work for me. Now i am happy. I was imaging that in HTML revolution there may be some nice solution provided by the HTML developer community, but against my expectation they did not. But your link is very much helpful for me. Thank you – Watters 11/11, 2010 at 13:26

After some experimenting I've come to find that when it comes to using cssstickyfooter.com's solution combined with the HTML5Shiv hack there's one little problem with the directions. For the Sticky Footer they tell you to add the following to your header: "<!--[if !IE 7]><style type="text/css">#wrap {display:table;height:100%}</style><![endif]". This can mess up IE 9 and Firefox renderings. Just change the "!IE 7" to "lt IE 7" and you should be good to go. This worked for me, but maybe I haven't found any pitfalls yet. – Delanty 31/3, 2011 at 5:55

H

4

This should get you where you are looking to go: (edited to add extra line so that code markup will show good)

The basic HTML:

<footer>
    <div class="colwrapper">
        <div class="fltcol">col1</div>
        <div class="fltcol">col1</div>
        <div class="fltcol">col1</div>
    </div>
</footer>

Here is the CSS:

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px; /* bottom = footer height */
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: #949494;
    color: #ffffff;
}

.colwrapper{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}

/* Specify a 40 pixels gap between the columns: */
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

/* Specify the width, style and color of the rule between columns: */

-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

Ho answered 15/11, 2013 at 18:28 Comment(0)

S

2

While people are suggesting html5shiv, I recommend using modernizr as well:

http://www.modernizr.com/

And also maybe take a look at:

http://html5boilerplate.com/

This will help all browsers render your site properly. Good luck.

Selfregulated answered 4/8, 2011 at 12:39 Comment(0)

H

0

You do this the exact same way you do it in HTML4.01.

Heyde answered 11/11, 2010 at 12:13 Comment(1)

Ya i did that but i do not find any sufficient post that work in my case. can you please suggest me some nice post – Watters 11/11, 2010 at 12:48

P

0

There is a nice JS to get HTML5-support for IE<9 … the other Browsers do already support the HTML5-elements.

https://code.google.com/p/html5shiv/#

Pretended answered 11/11, 2010 at 12:13 Comment(0)

D

0

Using position absolute for <footer> works, but if you have an extending content as your main width grows you'll see the problem, or as you use the inspect, the footer starts hanging in the middle of the screen. Not a perfect solution but using fixed bottom simply resolves the issue.

Dennisedennison answered 23/3, 2016 at 17:8 Comment(0)

Recommended topics

Hot tags