<div id="Content"> <div id="holidays"> <h3>Upcoming City Holidays</h3> <p><span>Christmas</span><br />Sunday, Decemeber 25th</p> <p><span>Thanksgiving</span><br />Wednesday, Decemeber 25th</p> </div> <div id="announcements"> <h3>Annoucements</h3> <div> <h4>New City Policy<br /><span>By: John Doe</span></h4> <h4>New City Policy<br /><span>By: John Doe</span></h4> <h4>New City Policy<br /><span>By: John Doe</span></h4> <h4>New City Policy<br /><span>By: John Doe</span></h4> <h4>New City Policy<br /><span>By: John Doe</span></h4> </div> </div> </div>
Never-mind, I figured it out. I needed to add a "marign-top: 0px" for the h3 tags. I believe it was because the box had no boundary to push against. Still curious why overflow: hidden worked though.
The overflow: hidden (or auto) is but one way to contain floats - its in the specs. It creates a new block formatting context, which will contain any floats. Another popular containment method is the clearfix method (some call it a hack, but its definitely not) which uses a pseudo class to add content after the float and clear it. This works similar to adding the extraneous div and clearing, but without the markup. There are other ways as well - no one way is perfect, so its best to know the various methods.
I want it to look like this:
Correct Layout
But instead, it displays like this:
How it appears
Here is the HTML code:
This is the Style Sheet:
...just above the closing tag of the "#Content" div.
The other problem I have now is the h3 tag is not flush to the containing div tag.
h3 no flush