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/