Необъяснимый разрыв в верхней части календаря?

Question

Я пытаюсь внедрить FullCalendar в макет с двумя столбцами (левый столбец).Правая боковая панель - это плавающий элемент div, который создает разрыв между элементами управления календаря и самим календарем.

Как я могу решить эту проблему?

Вот 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" />
    <div id="footer">
        <p>Footer</p>
    <!-- end #footer --></div>
<!-- end #container --></div>

А вот 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;
}

Answer 1

Посмотрите на css:

.fc-content {
   clear: both;
}

Вот что вызывает это. Удаление этого, похоже, ничего не нарушает, но я не проверял его в IE.

Answer 2

Попробуйте добавить это, аналогично @spuas answer

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