I'm struggling to summarize my predicament, but let me share some simplified code that highlights the issue (index.html):
<html>
<body>
<div id="wrapper" class="divide">
<div id="top" class="divide">
....(all content)....
</div>
<div id="content" class="divide">
<div id="left">
....(all content)....
</div>
<div id="right">
....(all content)....
</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;
}
I'm trying to make the "wrapper" div have a white background color, with another color surrounding it in the body background (for example, brownish). This is working for the "top" div, but not for the "content" div and its children. The "content" div is displaying the same background color as the body, even though it's contained within the "wrapper" div.
In simpler terms, the "wrapper" div doesn't seem to encompass the "content" div and its children. Any suggestions on how to address this issue would be greatly appreciated. Let me know if more information is needed. Thank you for any assistance!
UPDATE: It has been brought to my attention that the floating properties in the div element are causing this problem. I hadn't initially realized this was the issue, which is why the floating properties were omitted originally. Therefore, I've made some adjustments to the code above to pinpoint the source of the problem. Thanks for your insights!