html - How do I clear my floats? -


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us"> <head> <style type="text/css"> body {width:100%;overflow-x:hidden;} *{margin:0; padding:0; border:0;} .wrap{float:left;width:100%;background-color:#ccc;} .content{width:1000px;margin:0 auto;background-color:#efefef;} .left{float:left;width:760px;} .right{float:left;width:240px;} </style> </head> <body> <div class="wrap">     <div class="content">         <div class="left">             111<br />             222<br />             <!-- there still have lines -->         </div>         <div class="right">                  </div>     </div> </div> </body> </html> 

the div height zero, background color has disappeared. if give div.content height auto or 100%. why background color gone?

add overflow:auto .content clear floats

example: http://jsbin.com/onedi3

more information clearing can find @ http://www.quirksmode.org/css/clearing.html


Comments

Popular posts from this blog

javascript - Enclosure Memory Copies -

php - Replacing tags in braces, even nested tags, with regex -