css - div background color won't fill the div -
this question has answer here:
for reason cannot lie of me figure out why background color of div doesn't fill. have 3 images in div. color comes down little ways. cannot find previous post gives me 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>
that's due floats - not "covered" surrounding parent elements. add overflow: auto;
wrapper change 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>
Comments
Post a Comment