Floating elements are ignored - html

Question

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!!

Answer 1

please don't forget to clear your float inside of "#calendar" by using a simple:
#calendar {
overflow: hidden;
}
Or even better: you use the cleaner version with an additional class "clearfix".
If you do so, you'll get your lost boxmodel of "#calendar" back.
Now you'll be able to position <h2> underneath your calendar.
If you have any further questions feel free to let me know!
Here a full example:
CSS:
#eastern {
text-align:center;
}
#calendar {
width: 700px;
margin: 0 auto;
outline: 1px solid red;
overflow: hidden; /* dirty version if you don't have a
class "clearfix" in your Stylesheet */
}
#saturday,#sunday {
width:350px;
float:left;
}
HTML: (Cleaner Version with class "clearfix")
<div id="eastern">All times are Eastern</div>
<div id="calendar-container">
<div id="calendar" class="clearfix">
<div id="saturday"> ... </div>
<div id="sunday"> ... </div>
</div>
</div>
<h2>First event</h2>

Answer 2

Please try below code where i have added clear class with clear both left and right:
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>
<div class="clear"></div>
<h2>First event</h2>
CSS
#eastern {
text-align:center;
}
#calendar {
width:700px;
margin:auto;
}
#saturday,#sunday {
width:350px;
float:left;
}
.clear{
clear:both;
}