Web development can be frustrating at times. Hopefully, someone out there can shed some light on this issue and offer a solution.
You can view the HTML/CSS code below or check out this example on JSFiddle
The problem arises when I have a header div and a body div, both containing floating divs with a clearfix to ensure that the container spans over them. Despite setting the foreground color of the header div to WHITE and the body div to BLUE, the body div ends up inheriting the header div's color as well. How is this even possible?
In my actual code, things get even weirder. When I specifically set the foreground color for the body div to BLUE, the header div also changes to blue. While I can't replicate this exact issue in the JSFiddle provided, understanding it here might help me solve the bigger problem in my original code :)
HTML:
<div>
<div id="head">
<div class="headleft">
<h1>that's my header, baby</h1>
</div>
<div class="headright">
<p>righty right</p>
</div>
<div style="clear: both" />
</div>
<div id="body">
<div class="feature">
<h1>feature 1</h1>
</div>
<div class="feature">
<h1>feature2</h1>
</div>
<div style="clear: both;" />
</div>
</div>
CSS:
body {
color: blue;
}
div#head {
background-color: gray;
width: 400px;
color: white;
}
div#body {
background-color: lightgray;
}
.headleft {
float: left;
}
.headright {
float: right;
}
.feature
{
float: left;
margin-right: 10px;
}
Thank you in advance for any insights into resolving this puzzling issue!
EDIT Apologies for editing the copied code incorrectly earlier. I've fixed it now, and the missing closing DIV has been added back. The issue was not related to the missing tag.