Question

I have a site that has the following basic structure. This site should have a background that is white, with an image that apears once, but instead it just inherits the colour from the html{ } declaration in CSS. All elements below the element that should have the background are transparent, and even though the background is being added (checked in Firebug), it seems that this is below the background defined in html{ }.

This has only happened since I removed the declaration overflow: none; from #content-container, where as before that it worked. I need to remove this however, as changes that are occuring to the site require the nav menu to have dropdowns, so the container below has to allow overflow.

Is there a specific CSS reason why this is happening? Or anything else I need to provide for someone to be able to help? Thanks.

<div id="main-container">

    <div id="header-container">
        <div id="header-top">
            {Code}
        </div>

        <div id="header-middle">
            {Code}
        </div>

        <div id="header-nav">
            {Code}        
        </div>
    </div>

    <div id="content-container">
        <div id="content-left" class="index">  
            {Code}
        </div>

        <div id="content-right">
            {Code}
        </div>
    </div>

    <div id="footer-container">
        {Code}
    </div>

</div>

Answer 1

I’m guessing that #content-left and #content-right elements are floated? In which case the overflow: none on the #content-container was causing the element to self-clear. Without this, the element will not have a height because all the elements within it are floated, and therefore the containers’ height cannot be calculated.

If you must use overflow: visible, the workaround is to place a div at the end of the containing element with clear: both set on it:

<div id="content-container">
    <div id="content-left" class="index">  
        {Code}
    </div>

    <div id="content-right">
        {Code}
    </div>

    <div class="clear"></div>
</div>

.clear { clear: both; }