10

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

Markus
  • 3,225
  • 6
  • 35
  • 47
Hugo
  • 2,186
  • 8
  • 28
  • 44
  • 1
    The title of the question reminds me of a [song](https://www.youtube.com/watch?v=qT6XCvDUUsU) of Moby. – robsch May 05 '20 at 16:33

1 Answers1

32

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?

Community
  • 1
  • 1
web-tiki
  • 99,765
  • 32
  • 217
  • 249