Question

I ran into a quite annoying problem a few days ago. I’m working on a website with the following structure:

[header]
[menu strip]
[featured stuff]
[contents]
[footer]

(these are all horizontally centered divs under each other with the same fixed width in this order)

Later on I will change the contents of the “contents” part. Inside the “contents” div there will be other divs, sometimes with a fixed height and sometimes not.

Now here’s the problem: any time I put another div into the “contents” without a declared height, the inner div renders with 0px. It doesn’t matter if the inner div has elements with declared height or not. It works with declared heights, but I cannot guarantee that I will know the height of the contents at all times.

What could be causing this?

Answer 1

This sounds like a clearfix issue when elements inside the div are floating.

The problem happens when a floated
element is within a container box,
that element does not automatically
force the container’s height adjust to
the floated element. When an element
is floated, its parent no longer
contains it because the float is
removed from the flow.