The footer does not drop

Question

I need some quick help. My footer just won't drop at the end of the site. This is inside the wrapper and so on. I just can't find the error (looking at the same code for a long time)

I put the code in Jsfiddle: http://jsfiddle.net/heNuB/

Do not pay attention to other codes, I marked the footer with the background: black; so you can see where the footer is trying to go. He is trying to get "for" my 3 boxes.

I hope some of you have time to look into it. I know this is a bit noobish problem.

Good day to all of you! :)

Answer 1

Place the div div right in front of the footer and it should go to the bottom.

<div style="clear: both"></div> 

Your floating fields are pushed past the main wrapper.

For reference: http://www.quirksmode.org/css/clearing.html

Answer 2

Use clear: both;

 footer { font-size:small; text-align:center; height:50px; background-color:black; clear: both; } 

DEMO : http://jsfiddle.net/Sudjy/

Answer 3

Or you can just increase the margin-top attribute, this is my code:

  .footer { background-color: #717164; margin-top: 50px; border: 1px solid black; float: left; width:99%; height: 10%; position: fixed; clear: both; margin-top: 565px; } 

.footer is because I gave my footer a footer class that you did not know.

Answer 4

Why don't you give the margin-top .footer {margin-top: 50px; // or something} property to the footer, it should be omitted.