I set the background color for the div, but it disappears when I reduce the size of the window

Question

Web page link to the site . If you reduce the size of the window , the transparent gray background disappears. I tried several things to fix this, without success. Any ideas? CSS I used:

  #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 float:left; in #content id

like this

  #content{ float:left; } 

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

or define

 #content{ display:block; } 

Answer 2

There is a CSS rule that applies only when the width is less than 980px, which adds float:left . This causes 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

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

consists of the following rules:

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

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

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

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

so #content is display:inline , and the background will not appear - see Why is my background color not showing if I have a display: built-in?

Removing the @media screen and (max-width: 980px) .grid, .grid-right will fix the problem, but I assume that it exists as part of a sensitive site that scales and matches content with multiple window resolutions and sizes. I would recommend checking what behavior is required at lower resolutions. In any case, if #content a display:block or float:left in case the window is less than 980px, the problem will be fixed.

Answer 3

He works with

 .grid{ position: absolute; left: 0; /* ... */ } 

also. (float removed: left)