Why does my div have no height?

Question

I'm trying to mimic the row-column mechanism that twitter's bootstrap css framework uses.

I have a div containing some other divs which themselves contain come content. In my element inspector, it shows the container as having no height. Shouldn't the height of the div be the height of the elements it contains?

<div class="container">
    <div class="row yellow">
        <div class="column-1 red">
            column-1
        </div>

        <div class="column-1 blue">
            column-1
        </div>

        <div class="column-1 green">
            column-1
        </div>

        <div class="column-1 orange">
            column-1
        </div>

        <div class="column-1 red">
            column-1
        </div>

        <div class="column-1 blue">
            column-1
        </div>

        <div class="column-1 green">
            column-1
        </div>

        <div class="column-1 orange">
            column-1
        </div>

        <div class="column-1 red">
            column-1
        </div>
    </div>
</div>

Here is a jsfiddle:

HTML/CSS in question

Answer 1

The reason why the height or the containers is 0 is because you are floating all the content inside them and floated elements don't expand the height (or width) of their parents.

As you are floating all elents in row it has 0 height and therfore so has .container.

To prevent this, you can :

1. set overflow:hidden; on the containers demo
2. clear the float with a block element at the end of the container with clear:both; demo

You can also check this question for reference : How do you keep parents of floated elements from collapsing?