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
Post a Comment