How do I clear my floats?

Question

<!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 some lines -->
        </div>
        <div class="right">         
        </div>
    </div>
</div>
</body>
</html>

The DIV height is zero, the background color has disappeared. Even if I give DIV.content height auto or 100%. Why is the background color gone?

The question is "How do I clear my floats?" which is *surely* a duplicate. — thirtydot, Feb 11 '11 at 14:14

score 1 · Answer 1 · answered Feb 11 '11 at 14:12

1

Adding overflow: hidden; to your .content {} will sort this out. It's a float clearing thing. Adding overflow or a clearing element will make the wrapper contain what's inside.

answered Feb 11 '11 at 14:12

score 1 · Accepted Answer · answered Feb 11 '11 at 14:13

1

add overflow:auto for .content to clear the floats

example: http://jsbin.com/onedi3

More information for clearing you can find at http://www.quirksmode.org/css/clearing.html

answered Feb 11 '11 at 14:13

Sotiris

38,986
11
53
85

score 1 · Answer 3 · answered Feb 11 '11 at 14:14

1

Floating elements are "removed" from their parent, layout-wise. So your content div is empty and gets a height of 0. See this css-discuss article for the causes and fixes.

answered Feb 11 '11 at 14:14

Sander Marechal

22,978
13
65
96

score 0 · Answer 4 · answered Feb 11 '11 at 14:13

0

With XHTML the div has to have content or it will not be registered as "there." To force it to display using XHTML, type   in the div you wish to display.

answered Feb 11 '11 at 14:13

Kyle

65,599
28
144
152

How do I clear my floats?

4 Answers4

Linked

Related