4

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?

Tom Gullen
  • 61,249
  • 84
  • 283
  • 456
  • Duplicates: http://stackoverflow.com/questions/3558985/how-come-css-changes-a-div-when-i-add-a-block-styled-element-inside-it/3559002#3559002 http://stackoverflow.com/questions/3549513/css-div-heights/3549536#3549536 – Ryan Kinal Aug 25 '10 at 15:39

6 Answers6

5

Insert the third div:

<div style="clear:both;"></div>
graycrow
  • 3,675
  • 6
  • 26
  • 28
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>
imbadatjquery
  • 87
  • 1
  • 1
  • 6
2

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>
Déjà vu
  • 28,223
  • 6
  • 72
  • 100
1

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.

Rob
  • 14,746
  • 28
  • 47
  • 65
0

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.

pharalia
  • 709
  • 4
  • 6
0

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)

danielgwood
  • 212
  • 1
  • 9