Why is there a huge gap between my content and my footer?

Question

I have 2 columns on the page which are floated to the left, and contained in a wrapper div called 'content'.

I then have a footer contained in #footer. There is a huge gap between my content and footer, and I cannot figure out why! Here's the link to the codepen and the relevant code:

http://codepen.io/Pea92/pen/WvrXRY

HTML:

<div id="content">
<div class="sidebar">Information etc</div>
<div class="column2"></div>
</div>
<div id="footer"></div>

CSS:

.sidebar {
float:left:
width:20%;
}
.column2 {
float:left;
width:60%;
}

Answer 1

You have a syntax error:

<div class="clear" <div="" id="footer">
        <p>© Copyright 2015</p>

    </div>

You did not close your <div tags... please always validate your code. http://validator.w3.org/

Answer 2

I think you missed the closing > to your clear div. Or anyways, there's something wrong with the code at the bottom of your page. There's something missing, correct your code.

<div class="clear"
      <div id="footer">
        <p>&copy; Copyright 2015</p>

    </div>


  </body>

Answer 3

This is known bug, there is something wrong with the balancing algorithm of the multicol layout: https://code.google.com/p/chromium/issues/detail?id=297782