HTML: how can I get my footer in the bottom of my website?

I'm not a newbie to css and h开发者_StackOverflowtml, but totally not smart with php. Can someone tell me what to edit to have the grey bar at the bottom of my website (even when the content doesn't push the bar to the bottom?

Here is the link to one a the pages containing a footer not in place (in Dutch) Perhaps I looked over the problem to many times, but I can't find it (bed time?)

Note: I use a 23" screen at 1920 x 1080

Footer not Footer bad good:

Footer Footer also bad also bad

If you want the footer to always be at the bottom of the browser window, try the sticky CSS footer code. (More results on Google)

EDIT:

It seems that the first part of my answer is what you want, but I'm keeping this anyway.

If you want to keep the footer in view (even when there's more code) then you will need to use the following css:

#footer{
  position: fixed;
  bottom: 0;
}

Note, that code may not work properly on mobile devices like iPad.

Here is the html for the footer from firebug...

<div class="mf">
              <div style="color: rgb(142, 142, 128);" class="home-links-footer">
                <a href="/index.php">Home</a> | <a href="/contact-gegevens.html">Beveel ons aan!</a> | <a href="/onze-services.html">Onze Services</a> | <a href="/laptop-reparatie.html">Laptop Reparatie</a> | <a href="/tarieven.html">Onze Tarieven</a> | <a href="/contact-gegevens.html">Contact Gegevens</a> | <a href="#">Sitemap</a>
              </div>
              <div style="border-bottom: 1px dotted; margin: auto; color: rgb(142, 142, 128); padding-bottom: 3px; width: 700px;">
                Friese Computerservice - 8932 JZ Leeuwarden - <a style="text-decoration: none;" href="mailto:info@friesecomputerservice.nl"><span style="color: rgb(245, 127, 32); font-weight: bold;">info@friesecomputerservice.nl</span></a> - Tel. 058-8446628 Mob. 06-29594595
            </div>
        </div>