CODEWITHSUNDEEP
htmlcsscss-float
NicholasJohn16
NicholasJohn16

Reputation: 2409

Floating elements are ignored

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

Upvotes: 0

Views: 140

Answers (2)

Kayzah
Kayzah

Reputation: 51

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>

Upvotes: 1

codeee
codeee

Reputation: 397

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

Upvotes: 0

Related Questions