Proper (Industry standard) way of setting footer

Question

What is the proper way of creating a footer div, I have normally used these codes below to set my footer div, I want to know how footer div is being coded industry-standard wise. How would I set the footer so it can go to the bottom of the screen whenever the content is filled up.

Here is my HTML:

<div id="wrapper">
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
</div>

Here is my CSS:

 html {
     background:white;
     height:100%;
 }
 #wrapper {
     width:960px;
     margin-right:auto;
     margin-left:auto;
 }
 #header {
     background:#000000;
     min-height:30px;
 }
 #content {
     background:orange;
     min-height:500px;
     padding:20px;
 }
 #footer {
     clear:both;
     background:black;
     min-height:30px;
     position:relative;
 }

So is my code the correct way of laying out the HTML document? — chris, Mar 13 '14 at 07:19

score 0 · Answer 1 · edited May 23 '17 at 11:59

If you're using any HTML version less than 5, then there really isn't a standard and what you've done is as good as many other layouts (although I'd always use classes and never IDs -- but that's a different topic)

If you're using HTML5, which you probably should do whenever you can, you should use the footer tag.

When using HTML5, here's a more standard way of laying out your page:

<header><nav></nav></header>
<main></main>
<footer></footer>

More information on HTML5 layouts is available here:

http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html

https://www.smashingmagazine.com/2009/08/designing-a-html-5-layout-from-scratch/

Proper (Industry standard) way of setting footer

1 Answers1