CSS background diappearing when Overflow is Visible

background, css, overflow

Solution

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

Problem

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> ```

Original source