CSS Trick: Clearing the Div Float

If the sidebar is floated to the right and is shorter than the main area the footer then is required to jump up into that available space, like below:

To fix it, you can 

#footer {
  Clear: both;
}

or add an empty div before the footer block with the style set to:

<div style="clear:both;">

or, even better and more clever using a CSS pseudo selector (:after) to clear the floats. It’s extremely helpful in situations where making changes to the stylesheet is the only way to fix the problem.

.floatblock:after {
  content: ".";
  visibility: hidden;
  display: block;
  clear: both;
}

/via CSS-Tricks/