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

Question

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.

@cimmanon Was just a editing issue of the sample ... i corrected the sample so you can see this was not the issue. — Bernhard Koenig, Jul 05 '13 at 11:56

score 2 · Answer 1 · answered Jul 05 '13 at 11:01

2

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>

answered Jul 05 '13 at 11:01

Martin Lechner

187
2
13

No he didn't...Can't you see it on the line above? He used the `/>` then a close div tag. – JosephGarrone Jul 05 '13 at 11:53
Sorry I just messed up the sample ... adding the missing div does not fix the issue, though. – Bernhard Koenig Jul 05 '13 at 11:54
@Asryael He was right ... I edited the sample and at one time removed the closing head div. Was my fault. But now it's correct and the problem still exists. – Bernhard Koenig Jul 05 '13 at 11:59
@bkoenig I must have visited this page only after you edited your question. – JosephGarrone Jul 05 '13 at 12:00
1

@Asryael: See http://stackoverflow.com/questions/5455768/why-do-browsers-think-this-div-tag-isnt-immediately-ended/5455770#5455770 – BoltClock Jul 05 '13 at 12:14
@BoltClock Thanks ... that was my oversight! – Bernhard Koenig Jul 05 '13 at 12:23

score 1 · Answer 2 · answered Jul 05 '13 at 11:01

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>

Sorry I just messed up the sample ... adding the missing closing div does not fix the issue, though. — Bernhard Koenig, Jul 05 '13 at 11:53

JosephGarrone · Accepted Answer · 2013-07-05T12:11:32.080

1

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.

edited Jul 05 '13 at 12:11

answered Jul 05 '13 at 11:59

JosephGarrone

4,081
3
38
61

Thanks Asryael, that would fix it, but I still don't understand how my approach could be wrong. I set a "global" foreground color of blue in the body tag. And I just want to have a different color for the
part. The
part should use the colors defined for , I don't want to specify a explicit color for this part. So from my point of view, my sample should work and I don't understand why not.
– Bernhard Koenig Jul 05 '13 at 12:03
@bkoenig Cascading means that the style's follow from the parent OR the previous sibling OR the previous sibling's children. Essentially, this means that the style will come from the last rendered `div` element. – JosephGarrone Jul 05 '13 at 12:05
But it should only apply to children and not to ancestors ... mainly because I explicitely specify that the style applies only to divs with id "head". What proves my point of view is this jsfiddle: http://jsfiddle.net/5wcQ5/ - i just removed the floating of the inner elements and the clear: both divs and it works as expected. So it must have something to do with clearing the floating ... but why? – Bernhard Koenig Jul 05 '13 at 12:17
1

@Asryael: No... that's not what cascading means. The transfer of styles from an ancestor to a descendant is called inheritance; styles can *never* transfer between siblings or from a descendant to an ancestor. – BoltClock Jul 05 '13 at 12:21

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

3 Answers3