How to bump footer down when there is floating in div above?

Question

I need to bump my footer down to the bottom of the page, regardless how much content is on the page above it. So I did some search on the internet and found one solution according to this site:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

However, everything works OK until I applied "float:left" to the content div. The footer is no longer on the bottom and got bumped up half way. My question is, How to keep the footer down when there is floating in the div above?

Please see this jsfiddle here for my example:

http://jsfiddle.net/mEuke/5/

or code here:

<style type="text/css">
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

</style>

<div id="container">
   <div id="header"></div>
   <div id="body">

   <div id="test" style="float:left">
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
   </div>   
      </div>


   <div id="footer"></div>
</div>

score 1 · Accepted Answer · edited May 23 '17 at 11:56

You need to use a clearfix on the the container of the floated children

Here is a modern clearfix that works in modern browsers.

#body:after { /* #body is your container */
  content: "";
  display: table;
  clear: both;
}

This will solve your problem

Demo: http://jsfiddle.net/mEuke/7/

For a cross browser clearfix read this Article: http://css-tricks.com/snippets/css/clear-fix/

What is a clearfix?

A clearfix is a way for an element to automatically clear after itself, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.

The clearfix is a way to combat the zero-height container problem for floated elements.

Source: What is a clearfix?

How to bump footer down when there is floating in div above?

1 Answers1

What is a clearfix?