Geek Answers Handbook

HTML / CSS - Why is float: left render as "invisible"?

If you have two divs contained in 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 displayed as “invisible,” since the div does not stretch in the container so that they can fill as if they were not there. This creates ugly matches / spaces, etc.

How do you solve this problem?

+4
source share
6 answers

Insert the third div:

 <div style="clear:both;"></div>
+5
source

I think this may be because you forget to close the tags, try the following:

 <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>
+2
source

Try adding <br style="clear:both"/> , (or clear left), this is the usual method to give life to floating elements in the 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>
+2
source

Parents should never expand to contain floating children. Although IE <8 does this, it is a long error (one in millions) in this unskillful browser. The best solutions are to float the parent, set the height / width, or use overflow: auto in CSS.

+1
source

The outer div does not float, so if you have not explicitly set the height, it will not be displayed in this case (except for the border). Either set the height of the outer div to 20px, or place it.

0
source

Is there a reason why you cannot / cannot put any content in a div? They overlap / appear invisible because 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>

Show two divs next to each other (tested IE6, Chrome 3, Firefox 3.5, IE7)

0
source

More articles:


All Articles