Geek asks and answers

Display CSS background when overflow is visible

I have a website that has the following basic structure. This site should have a white background with an image that appears once, but instead it inherits the color from the ad html{ }in CSS. All elements under the element that the background should have are transparent, and even if the background is added (marked in Firebug), it seems that it is below the background defined in html{ }.

This only happened after the ad was removed overflow: none;from #content-containerwhere, as before, it worked. However, I need to remove this, since the changes occurring on the site require drop-down lists in the navigation menu, therefore overflow is allowed in the container below.

Is there a specific CSS reason why this happens? Or is there something else I need to help someone help? Thank.

<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>
+3
source share
1 answer

I assume the elements #content-leftand #content-rightplaced? In this case, overflow: noneon the #content-containerinduced self-cleaning element. Without this, the element will not have a height, because all the elements inside it are floating, and therefore the height of the container cannot be calculated.

If you must use overflow: visible, a workaround is to place divat the end of the containing element with clear: bothmounted 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; }
+4
source

More articles:


All Articles