Unexplained gap at the top of the calendar?

I am trying to implement FullCalendar into a 2 column layout (left column). The right sidebar is a floating div and it is causing a gap between the calendar controls and the calendar itself.

How can I solve this issue?

Here's the HTML:

<div id="container">
    <div id="header">
        <h1>Header</h1>
    <!-- end #header --></div>

    <div id="sidebar1">
        <h3>sidebar1 Content</h3>
        <p>The background color on this div will only show for the length of the content. If     you'd like a dividing line instead, place a border on the right side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div. </p>
        <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    <!-- end #sidebar1 --></div>

    <div id="mainContent">
        <div id="calendar"></div>
    <!-- end #mainContent --></div>

    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
    开发者_如何学JAVA<div id="footer">
        <p>Footer</p>
    <!-- end #footer --></div>
<!-- end #container --></div>

And here is the CSS:

#mainContent  {
    padding: 0px;
    border: 1px solid #0F3;
    margin-top: 0;
    margin-right: 30%;
    margin-bottom: 0;
    margin-left: 0;
} 

#sidebar1 h3 ,#sidebar1 p   {
    margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
    margin-right: 10px;
}

---

Take a look at the css:

.fc-content {
   clear: both;
}

That is what's causing it. Removing it doesn't seem to break anything, but I haven't tested it in IE.

---

Try adding this, similar to @spuas answer

.fc-clear { 
    clear: none !important; 
}