Question

I have created some <div> tags and am setting it to contain two <div> tags that are floated to both sides of the <div>.
I noticed when I tried to set a background color that the containing <div> was not properly wrapping around the <div>s that its supposed to contain.
I would like to know why this happens.

I have seen a similar question here Why are these Div tags not nesting properly? but no one has explained why this happens in any of the answers.

Answer 1

When you float the inner divs, you take them out of the normal document flow, so basically your containing div has no content and no height.

You can solve it by adding a:

overflow: hidden;

to the outer div (just one possible solution).