CODEWITHSUNDEEP
csshtmlheight
ansarob
ansarob

Reputation: 825

Div Not Creating Height

I have a div that contains an h2 and three div's, but it is not creating height. I don't recall having this issue before. But basically, the three containing div's need to be flexible in height, so I can't give the container div a set height. Since it isn't creating height, my footer floats on top of the div. If you hover over the "recent" div in firebug or inspector, you'll notice the height of the div only extends the height and margin of the h2. Any thoughts? Thanks!

Here's the fiddle: Link

Upvotes: 1

Views: 83

Answers (1)

Sampson
Sampson

Reputation: 268344

Your three inner divs are set to float: left, and therefore do not affect the height of their parent. You need to clear them. There are various ways to do this; one is to set overflow: hidden on the parent.

#recent {
  clear: both;
  margin: 0 auto;
  margin-top: 30px;
  width: 824px;
  overflow: hidden;
}

There are various other methods out there as well, some better than others. I would encourage you to read http://css-tricks.com/all-about-floats/, specifically the part Techniques for Clearing Floats.

Upvotes: 2

Related Questions