Why doesn't my div have height?

Question

I am trying to simulate a column-column mechanism using the css script framework.

I have a div containing some other divs that themselves contain content. In my element inspector, it shows that the container has no height. Should 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 the jsfiddle:

HTML / CSS in question

Answer 1

The reason that the height or containers are 0 is because you are floating all the content inside them, and the floating elements do not extend the height (or width) of their parents.

When you float all the elves in row , it has 0 height and therefore has .container .

To prevent this, you can:

• install overflow:hidden; in containers demonstration
• clear the float with the block element at the end of the container with clear:both; demo

You can also check this question for reference: How do you keep parent elements in floating elements?

Answer 2

Because you did not assign height to the container. That is why when you check an element, there is no height.