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?
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.
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>
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)
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.