CODEWITHSUNDEEP
css
Kelvin
Kelvin

Reputation: 585

Auto adjust background color to cover whole container

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

Upvotes: 0

Views: 173

Answers (5)

Anonymous
Anonymous

Reputation: 10216

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

Upvotes: 1

siropo
siropo

Reputation: 210

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/

Upvotes: 2

TeeDeJee
TeeDeJee

Reputation: 3741

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

Upvotes: 1

Ole Haugset
Ole Haugset

Reputation: 3797

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>

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15961

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>

Upvotes: 0

Related Questions