Columns are tricky. Try to build this.


The "Wrong" Answer

You could put a <div style="clear:both"></div> between the footer and the columns. It would clear the floats and provide something that the footer's top margin could push against. But then you'd have an empty, unsemantic element that you don't need in your code.

The very thought of this should fill you with disgust, that such ugliness should be allowed to blight your code even though your users would never notice.


columns: 2; is a thing in CSS3, however, it still doesn't feel ready for prime time. Read more on MDN.