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

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?

Insert the third div:

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

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>

Try to add the <br style="clear:both"/>, (or clear left) it is a common method to give life to floated elements within a container

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

Parent elements are never to expand to contain floated children. While IE<8 does do this, that's a long standing bug (one of millions) in that inept browser. The best solutions are to float the parent, set the height/width, or use overflow:auto in the CSS.

The outer div isn't floated, so unless you explicitly set a height it won't display in this case (other than the border). Either set height of outer div to 20px or float it.

Is there a reason why you aren't/can't put any content in the divs? They overlap / are displayed invisible since there is no content.

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

Will show the two divs next to eachother (Tested IE6, Chrome 3, Firefox 3.5, IE7)