I have set a background color to a div, but it disappears when I reduce the window size

Question

The web page is site link. If you reduce the window size, the transparent grey background disappears. I have tried a number of things to fix this, without success. Any ideas? CSS I've used is:

  #content {
    margin-bottom: 20px;
    padding-left: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    overflow:auto;
}

Answer 1

Hi now define to float:left; in your #content id

as like this

   #content{
    float:left;
    }

--------------

or define

#content{
display:block;
}

Answer 2

There is a CSS rule that is only applied when the width is less than 980px which is adding a float:left. This is causing the background to disappear.

@media screen and (max-width: 980px) .grid, .grid-right {
    float:none;
}

When the window is larger than 980px, #content has a computed style of

float:left;
display:block;
width: <not auto but some real px value>;

comprised from the following rules

.grid {
    float: left;
    margin-bottom: 2.127659574468%;
    padding-top: 0;
}
.col-860 {
    display: inline;
    margin-right: 2.127659574468%;
}

Having float:left overrides display:inline and therefore #content becomes a block level element (see css display property when a float is applied) and the background color will be applied.

However, when the window is smaller than 980px, #content has a computed style of

float:none;
display:inline;
width:auto;

therefore #content is display:inline and the background will not appear - see Why is my background color not showing if I have display: inline?

Removing the @media screen and (max-width: 980px) .grid, .grid-right rule will fix the problem but I assume this exists as part of the responsive site that scales and fits content to multiple resolutions and window sizes. I would recommend checking what behaviour is required at lower resolutions. Either way, giving #content a display:block or float:left in the case where the window is less than 980px will fix the problem.