HTML/CSS - Why does float:left render as 'invisible'?

Question

If you have two divs contained within a div:

<div style="border:1px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
</div>

The two inner divs are rendered as 'invisible', as in the container div doesn't stretch to allow them to fill, as if they were not there. This creates ugly overlaps/whitespace etc.

How do you go about resolving this issue?

Answer 1

Insert the third div:

<div style="clear:both;"></div>

Answer 2

I think it may be because you are forgetting to close the tags, try this:

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:green;width:20px;height:20px;"></div>
</div>