0

For some reason I cannot for the lie of me figure out why the background color of a div doesn't fill. I have 3 images in the div. but the color only comes down a little ways. I cannot find a previous post that gives me the answer.

#RevWrapper {
 clear: both;
 margin: auto;
 max-width: 1232px;
 display: block;
 padding-left: calc((100% - 1232px)/2);
 padding-right: calc((100% - 1232px)/2);
 background-color: #006666;
 padding-bottom: 2%;
}
#rev1 {
 clear: both;
 float: left;
 width: 33.3%;
 display: block;
 padding-bottom: 2%;
 padding-top: 2%;
}
#rev2 {
 clear: none;
 float: left;
 width: 33.3%;
 display: block;
 padding-bottom: 2%;
 padding-top: 2%;
}
#rev3 {
 clear: none;
 float: left;
 width: 33.3%;
 display: block;
 padding-bottom: 2%;
 padding-top: 2%;
}
.revimagecenter {    
    display: block;
 width: 85%;
    margin-left: auto;
    margin-right: auto
}
<div id="RevWrapper">
    <div id="rev1"><img src="images/rev1.fw.png" alt="Review 1" class="revimagecenter">
    </div>
    <div id="rev2"><img src="images/rev2.fw.png" alt="Review 2" class="revimagecenter">
    </div>
    <div id="rev3"><img src="images/rev3.fw.png" alt="Review 3" class="revimagecenter">
    </div>
</div>
Rasclatt
  • 12,498
  • 3
  • 25
  • 33
Comp Stuff
  • 5
  • 6

4 Answers4

1

That's due to the floats - they are not "covered" by surrounding parent elements. Add overflow: auto; to the wrapper to change this behaviour:

#RevWrapper {
 clear: both;
 margin: auto;
 max-width: 1232px;
 display: block;
 padding-left: calc((100% - 1232px)/2);
 padding-right: calc((100% - 1232px)/2);
 background-color: #006666;
 padding-bottom: 2%;
  overflow: auto;
}
#rev1 {
 clear: both;
 float: left;
 width: 33.3%;
 display: block;
 padding-bottom: 2%;
 padding-top: 2%;
}
#rev2 {
 clear: none;
 float: left;
 width: 33.3%;
 display: block;
 padding-bottom: 2%;
 padding-top: 2%;
}
#rev3 {
 clear: none;
 float: left;
 width: 33.3%;
 display: block;
 padding-bottom: 2%;
 padding-top: 2%;
}
.revimagecenter {    
    display: block;
 width: 85%;
    margin-left: auto;
    margin-right: auto
}
<div id="RevWrapper">
    <div id="rev1"><img src="images/rev1.fw.png" alt="Review 1" class="revimagecenter">
    </div>
    <div id="rev2"><img src="images/rev2.fw.png" alt="Review 2" class="revimagecenter">
    </div>
    <div id="rev3"><img src="images/rev3.fw.png" alt="Review 3" class="revimagecenter">
    </div>
</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
0

It's because you have used float. In this case, remove float and clear from all and rather than using float, you can try margin-left for second and third divs.

Kishor Malakar
  • 81
  • 1
  • 6
0
#RevWrapper {
    clear: both;
    margin: auto;
    max-width: 1232px;
    display: block;
    padding-left: calc((100% - 1232px)/2);
    padding-right: calc((100% - 1232px)/2);
    background-color: #006666;
    padding-bottom: 2%;
}
#rev1 {
    clear: both;
    float: left;
    width: 33.3%;
    display: block;
}
#rev2 {
    clear: none;
    float: left;
    width: 33.3%;
    display: block;
}
#rev3 {
    clear: none;
    float: left;
    width: 33.3%;
    display: block;
}
.revimagecenter {    
    display: block;
    width: 85%;
    margin-left: auto;
    margin-right: auto
}

Remove the padding.
codechick
  • 61
  • 4
0

Add <div style="clear:both;"></div> as the last div inside RevWrapper.

user2215732
  • 41
  • 1
  • 4