cannot position a footer CSS

Question

I'm folowing this tutorial for making a footer but the result is not as expected:

Footer

My html and css are in this JSFiddle

or below:

  <body>
  <div class="wrapper">
<div id="container">
    <div id="header">
        <div class="wrap">
            <div id="menuProfile">
                <div id="logotext">K-Panel &bull; Kerio Tools Management</div>
            </div>
        </div>
    </div>
    <div class="fix"></div>
    <div id="subheader">
        <div id="submenu" class="wrap">
            <div id="logocliente">
                <a href="<?php echo $this->baseUrl(); ?>/"><img height="50"
                    id="logoIscrittoTestata"
                    src="<?php echo $this->baseUrl(); ?>/KPanel_logo_2014_58x224.png"></a>
            </div>
        </div>
    </div>
    <div class="fix separatore"></div>
    <div id="page">

        <div id="right">
        </div>
    </div>
    <div id="push"></div></div>
<div id="footer">
        <strong>Freelands</strong> > Via Emilia Ponente, 479, 40132 Bologna (Italy) > Tel +39 051 7402558 > Fax +39 051 729153 > C.F. e P.IVA 03236491209 > <a
            id="footerEmailAzienda" href="mailto:info@freelands.it">info@freelands.it</a>
</div>

CSS:

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: middle;
background: transparent;
 }

 body {
font-family: Helvetica, Verdana, Arial, Tahoma;
font-size: 11px;
line-height: 1;
text-align: center;
color: #404040;
 }

 html,body {
height: 100%;
margin: 0px;
 }

 #container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
 }

 #footer {
background-color: #0082C0;
color: #FFFFFF;
padding-top: 15px;
 }

 * {
margin: 0;
 }

 body, html {
width: 100%;
height: 100%;
font-size: 16px;
font-family: calibri, gill sans, arial;
 }

 .wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -35px; /* the bottom margin is the negative value of the footer's height */
 }

 .footer, .push {
height: 35px; /* .push must be the same height as .footer */
 }

 #footer{
font-size: 12px;
font-family: calibri, gill sans, arial;
color: black;
text-align: center;
width: 100%;
 }

 #header{
display:block;
clear:both;
margin-top:20px;
 }

If you're looking for help, why not state what it is that you're actually having a problem with? — Etheryte, Feb 21 '14 at 14:31
You have a lot of wrappers going on. The first thing I would suggest is getting rid of some of those wrappers and containers that seem a bit extraneous. — MikesBarto2002, Feb 21 '14 at 14:31

score 1 · Accepted Answer · answered Feb 21 '14 at 14:31

1

You need to add a position:fixed; to the footer to stay it fixed. To make it stay at the bottom, add a bottom:0;

WORKING DEMO

The Code change:

 #footer{
font-size: 12px;
font-family: calibri, gill sans, arial;
color: black;
text-align: center;
width: 100%;
    position:fixed;
    bottom:0px;
 }

Hope this helps.

answered Feb 21 '14 at 14:31

Nitesh

15,425
4
48
60

then add a `z-index` to make adjust it accordingly. - @Christoph – Nitesh Feb 21 '14 at 14:33
you misunderstood...there is actually no need for fixed position and z-indexing... – Christoph Feb 21 '14 at 14:34
Okay, how can I phrase it correctly. Your solution uses `position:fixed`. This is bad. Don't do it. Got it now? – Christoph Feb 21 '14 at 14:37
But the link that he has mentioned and the output he wants to achieve is doable with a position fixed.. Am I sounding clear ?? - @Christoph – Nitesh Feb 21 '14 at 14:38
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/48073/discussion-between-nathan-lee-and-christoph) – Nitesh Feb 21 '14 at 14:41

score 1 · Answer 2 · edited Feb 21 '14 at 14:55

1

For stick you footer at the bottom you need to make it position:fixed bottom:0; and add margin-top:(height of your footer);

#footer {
    background-color: #0082C0;
    color: #FFFFFF;
    padding-top: 15px;
    position:fixed;
    bottom:0;
    margin-top:30px; /* height of the footer */

}

JsFiddle

edited Feb 21 '14 at 14:55

Christoph

50,121
21
99
128

answered Feb 21 '14 at 14:34

Harish Boke

557
3
16

Why are you guys so obsessed about fixed position? It's messy, error prone and absolutely not needed... – Christoph Feb 21 '14 at 14:39
1

Can you please explain how it mess up so i would get to know what standard to follow ? – Harish Boke Feb 21 '14 at 14:40
see http://chat.stackoverflow.com/rooms/48073/discussion-between-nathan-lee-and-christoph to follow my discussion with Nathan, I explained the problem there – Christoph Feb 21 '14 at 14:52

cannot position a footer CSS

2 Answers2