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

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -