How do I make a div height depend on the content inside?

Question

I have nested divs, with most being float:left; display:block;, like do:

<div class="container" style="display:block;">
    <div style="float:left; display:block; height:100px;">
    <div style="float:left; display:block; height:100px;">
</div>

I want the div container to get bigger without setting a height. At the moment it's a flat line.
How do I set up the inner divs, so that the container has a height?

TL;DR: Currently I can see the 2 inside div's fine, but the container is a flat div (no height).
How do I give it a height?

Answer 1

You have two options:

<div class="container" style="overflow:hidden">
    <div style="float:left; height:100px;">
    <div style="float:left; height:100px;">
</div>

or

<div class="container">
    <div style="float:left; height:100px;">
    <div style="float:left; height:100px;">
    <div style="clear:left">
</div>

Note that overflow:hidden elements will wrap around floating inner elements. Alternatively, you can use an element to clear the float, which will also make the surrounding element to wrap it's content.

Another tip: You don't have to state that divs are display:block. In HTML, there are basically 2 types of elements, block and inline. Divs are block by default.

Answer 2

Add overflow:hidden to that DIV.