CODEWITHSUNDEEP
htmlcss
Bernhard Koenig
Bernhard Koenig

Reputation: 1382

Why is this style from an ancestor (not parent!) div inherited?

Sometimes, HTML/CSS just drives me crazy ;( ... Hopefully someone can explain this behavior and maybe how to fix it.

See HTML/CSS below or this sample JSFiddle

So what I'm doing is having a header and body div, both with floating divs inside, and using clear: both; so the container div spans over the floating inner divs. In my real code I use a more complex clearfix class, but the problem is the same.

The body has a foregrond color BLUE. For the header-div, I set a foreground of WHITE. What drives me crazy is that the foreground-color gets also applied to the body-div even if it is not contained within the header-div. How can this happen?

In my real code I have even a problem that when I explicitely set the foreground for the body-div to BLUE, the color in the header-div also switches to blue. I cannot reproduce it with this JSFiddle but if I understand this problem I can reproduce in this sample code here, maybe I also understand the other problem :)

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;
}

Thanks for any help understanding this issue!

EDIT Sorry by editing the pasted code I messed up the sample and removed a closing DIV. I corrected this now, the issue was not the missing closing DIV.

Upvotes: 0

Views: 308

Answers (3)

JosephGarrone
JosephGarrone

Reputation: 4161

The problem with your HTML was that you were incorrectly closing the div tags. You can't close div's like this: <div/>. You must use <div></div>. Please see this working Fiddle.

Upvotes: 1

mohkhan
mohkhan

Reputation: 12335

You are missing a closing <div> for head

<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>
    <div id="body">
        <div class="feature">
             <h1>feature 1</h1>
        </div>
        <div class="feature">
             <h1>feature2</h1>
        </div>
        <div style="clear: both;" />
    </div>
</div>

Upvotes: 1

Martin Lechner
Martin Lechner

Reputation: 187

You forgot the closing tag on the head div. http://jsfiddle.net/UHXr6/2/

<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>
    <div id="body">
        <div class="feature">
             <h1>feature 1</h1>
        </div>
        <div class="feature">
             <h1>feature2</h1>
        </div>
        <div style="clear: both;" />
    </div>
</div>

Upvotes: 2

Related Questions