I have the following elements and css in an html file.

**HTML**

```
<div id="eastern">All times are Eastern</div>
<div id="calendar-container">
    <div id="calendar">
        <div id="saturday"> ... </div>
        <div id="sunday"> ... </div>
    </div>
</div>
<h2>First event</h2>

```

**CSS**

```
#eastern {
    text-align:center;
}
#calendar {
    width:700px;
    margin:auto;
}
#saturday,#sunday {
   width:350px;
   float:left;
}

```

For some reason, the `<h2>` element is floating up along the right side of the `#eastern`. The browser is acting like the element is completely empty even though it has plenty of content in the `#saturdy` and `#sunday` elements. Since `#calendar-container` isn't being floated I think it should force the `<h2>` element beneath.

I know I could just fix it using clear:both, but I feel like I'm missing something. Any help? Please? Thanks!!