Question

I dont get it. I wrote the code to have the footer always at the bottom. lets say sticky-footer. Here is my code.

 body {
       background-color: #edecd8;
       margin:0;
       padding:0;
        height:100%;

     }

       #container {min-height:100%; position:relative;}



      #body {
        padding-bottom:20px;
      }


    #footer {
      position:absolute;
      bottom:0;
      width:100%;
      height:20px;/* Height of the footer */
      background: #FC0;}

</style>

<div id="footer">  contact | the athens store | Mitropoleos 37    </div> 

With these code it didnt work well, actually the footer was not at the bottom but a bit higher. And then I added in the very beginning an html tag like this and it worked! Why was it wrong before?

html,body {
   background-color: #edecd8;
   margin:0;
   padding:0;
   height:100%;
  }

Answer 1

browsers have a default page margin and padding, thats why you got a little space under you bar, and that is why developers use a css reset to ower write these.

Or by useing a simple code

if you replace this

html,body {
   background-color: #edecd8;
   margin:0;
   padding:0;
   height:100%;
  }

to this

* {
   margin:0;
   padding:0;
}    

body {
   background-color: #edecd8;
   height:100%;
}

it will work and owewrite all the default browser paddings and margins