Floating elements are ignored

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

For the code you provided, it does not happen so in my browser. The `
` floats to the left, under the others. — TribalChief, Jul 02 '14 at 09:22
As @Thauwa already said, it works fine in my browser as well. Maybe you should watch it in another browser and try style it so it looks fine in your browser as well :) — roemel, Jul 02 '14 at 09:25
When I add a lot of content to the divs, it doesn't put the heading next to #eastern but next to the #calendar. As you already mentioned, it can be fixed using clear:both. Take a look at http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it to see how floats work. — user1439090, Jul 02 '14 at 09:36
Also take a look at the following to see why clear is important: http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#comment26828942_12871734 — user1439090, Jul 02 '14 at 09:42

score 1 · Answer 1 · edited May 23 '17 at 10:26

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>

score 0 · Answer 2 · answered Jul 02 '14 at 09:30

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;
}

Floating elements are ignored

` floats to the left, under the others.

2 Answers2