Grow your CSS skills. Land your dream job.

Please explain color inheritance

  • # January 29, 2011 at 1:59 pm

    I am in the process of understanding the principles of floating and I was wondering if someone could have a look at the link below where I placed one html file with embedded css
    http://www.sevda.netii.net/week7/

    I floated content to the right , sidebar to the left, and footer is not floated.
    I do not understand why content which background-color is not indicated , and hence should be white, takes the background of the footer which is set to red. What is interesting is that if I clear footer, then content become white, or
    if I specifically indicate a background-color for the content then it becomes white also. I am not sure why the content takes the background-color of the footer when footer is not applied : clear: both. It is not a part of the div footer. They are independent divs.
    Is there a rational explanation for this?
    Thank you very much.

    # January 30, 2011 at 12:07 am

    From the looks of it, what you said is totally opposite. Your content div is floated to the left and your sidebar is floated to the right. The reason your content div has the same background color as the footer is because you did not clear the float. If you want to achieve the same layout, use this code instead.

    #footer
    {background: red;
    float: left;
    width: 70%;
    }

    Otherwise, clear the float. This option would seem more appropriate.

    # January 30, 2011 at 11:46 am

    Thank you. yes, I confused left with right in my first post.
    the question was not about clearing, but why content took the color from the footer when footer was not floated or cleared, that is what I have problem understanding.
    anyway, that you very much

    # January 30, 2011 at 10:34 pm

    floats are taken out of the document flow. They have no effect on block level elements, but they do effect the inline content of those elements.

    A block level element that contains only a float will have a height of zero and the float will ‘hang’ outside of its parent. If that float is cleared by another element, the parent will then stretch in height to contain the float (there are other methods to contain floats as well, but I won’t go into that now).

    So, what you have is a parent wrapper div with four children – a header div, floating content and sidebar divs, and a footer div. The floating content and sidebar divs are taken out of the document flow. So there is the header, who’s height is determined by the text (you really should wrap that text in a semantic tag) followed by the footer. Now the footer’s inline content (the text) is affected by the floats and pushed down, which increases the footers height to that of the previous float and it’s own inline content.

    So the float is not inheriting the footers background – its actually running over the footer and displacing the footers text beneath it.

    I hope that explains it well enough…

    # February 1, 2011 at 6:07 pm

    thank you very much for explaining so well.

    # February 2, 2011 at 12:04 am

    wolfcry911 that description was golden. Thanks a lot!

    # February 2, 2011 at 8:48 am

    you’re welcome ;)

    uggh: effect ==> affect

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".