I don’t know how to summarize my situation, but here’s the simplified code showing the problem (index.html) :
<html>
<body>
<div id="wrapper" class="divide">
<div id="top" class="divide">
....(all of its contents)....
</div>
<div id="content" class="divide">
<div id="left">
....(all the contents)....
</div>
<div id="right">
....(all the contents)....
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
(style.css)
.divide{
margin-left:auto;
margin-right:auto;
width:960px;
}
body {
background-color: #666600;
}
#left {
......
......
float: left;
}
#right {
......
......
float: left;
}
#wrapper{
background-color:#ffffff;
}
So here I want the “wrapper” div background to be white in color, and the body background surrounding it to have another color (in here I put the brownish color). This works for the “top” div, but not the “content” div (thus, all of its children). The “content” div has the same background color as body, which doesn’t make sense to me because the “wrapper” div does contain “content” div.
In other word, the “wrapper” div seems doesn’t reach the “content” div and all of its children. Is there any workaround for this problem? Inform me if you all need additional information. Thanks for any help!
NOTE: As our helpful people pointed out, the floating properties in the div element does cause the above problem. I did not realize that. That’s why I didn’t put the floating properties in the first place. So I just edited the above code so that we know what’s really causing it. Peace!
Do you have any floated elements, such as
#leftand#right?If so, you need to clear your floats.
One way to do that is to add
overflow: hiddento#wrapper.You should also fix a small mistake in your HTML:
</left>to</div>.