Auto adjust background color to cover whole container

Question

I need to responsively show several images in a block container, how can I auto adjust and fill the whole container with specific color when screen size being narrowed. Below is the source code of HTML and CSS, demo can be viewed from http://jsfiddle.net/yckelvin/54v27shp/ Only the first few line are filled with the background-color, how can I fill the rest.

<div id="container">Smile Smile
    <ul>
        <li>
            <img src="http://3.bp.blogspot.com/-t9e7S8huhaQ/VBMVN6CbNGI/AAAAAAAAA14/02am46_jiJM/s1600/Big_smile.png">
        </li>
        <li>
            <img src="http://3.bp.blogspot.com/-t9e7S8huhaQ/VBMVN6CbNGI/AAAAAAAAA14/02am46_jiJM/s1600/Big_smile.png">
        </li>
        { rest content omitted }
    </ul>
</div>
<div id="container">Footer Footer</div>

CSS

#container {
    background-color: rgba(0, 255, 0, 0.2);
    width:calc(100%);
    height: 100%;
    display: block;
}

img {
    width: 100px;
}

li {
    display: table-cell;
    float: left;
    padding: 10px;
}

score 2 · Accepted Answer · edited May 23 '17 at 10:26

2

The problem is that you don't clear your floats on your li tags. One way to fix that is to add clearfix snippet to your #container.

#container:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

You can read more at - What is a clearfix?

And you can check the working code here - http://jsfiddle.net/54v27shp/3/

edited May 23 '17 at 10:26

Community

1
1

answered Oct 02 '14 at 07:44

siropo

210
2
14

Not only giving quick fix and also suggesting additional information, Also recommend to read http://css-tricks.com/all-about-floats/ – Kelvin Oct 02 '14 at 08:46

TeeDeJee · Answer 2 · 2014-10-02T07:43:19.757

1

You can add overflow:hidden to your container.

#container {
    background-color: rgba(0, 255, 0, 0.2);
    width:calc(100%);
    height: 100%;
    overflow:hidden;
}

Or set the display of your container to table or inline-block

#container {
    background-color: rgba(0, 255, 0, 0.2);
    width:calc(100%);
    height: 100%;
    display:table; // display: inline-block;
}

edited Oct 02 '14 at 07:43

answered Oct 02 '14 at 07:36

TeeDeJee

3,756
1
17
24

adding overflow:hidden to parent element and ensure the parent block to cover all elements. – Kelvin Oct 02 '14 at 08:48

Anonymous · Answer 3 · 2014-10-07T16:46:55.940

1

Add display: inline-block; to #container

JSFiddle - DEMO

#container {
    background-color: rgba(0, 255, 0, 0.2);
    width:calc(100%);
    height: 100%;
    display: inline-block; /* or float: left; */
}

OR:

Add display:inline-block; to li and remove display:table-cell; and float:left; from li

JSFiddle - DEMO

li {
    display: inline-block;
    padding: 10px;
}

edited Oct 07 '14 at 16:46

answered Oct 02 '14 at 07:37

Anonymous

10,002
3
23
39

score 0 · Answer 4 · answered Oct 02 '14 at 07:35

0

JS Fiddle

add a clear div after closing of </ul> the issue is because of float left for <li>

.clear{
  clear:both;
}

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

answered Oct 02 '14 at 07:35

Vitorino fernandes

15,794
3
20
39

score 0 · Answer 5 · answered Oct 02 '14 at 07:38

The problem you are experiencing is because the content of the #container is floated.

After your end UL-tag insert the following code:

<div style="clear:both;"></div>

Making the result:

<ul>
    <li>
        <img src="http://3.bp.blogspot.com/-t9e7S8huhaQ/VBMVN6CbNGI/AAAAAAAAA14/02am46_jiJM/s1600/Big_smile.png">
    </li>
    <li>
        <img src="http://3.bp.blogspot.com/-t9e7S8huhaQ/VBMVN6CbNGI/AAAAAAAAA14/02am46_jiJM/s1600/Big_smile.png">
    </li>
    { rest content omitted }
</ul>
<div style="clear:both;"></div>

Auto adjust background color to cover whole container

5 Answers5