Div Wrapper Background color not displaying - html

Question

My footer background color is not displaying...
What am I missing?
The test site is http://qtest.pw
I am adding extra words as requested... Don't know what else to say.. So I will keep typing until it says its ok
HTML
<div id="FooterWrapper">
<div id="FooterDiv1"><img src="images/ada-logo.png" alt="American dental Association - Helmich Dental">
</div>
<div id="FooterDiv2">
</div>
<div id="FooterDiv3">
</div>
<div id="FooterDiv4">
</div>
CSS
#FooterWrapper {
clear: both;
margin: auto;
max-width: 1232px;
display: block;
padding-left: calc((100% - 1232px)/2);
padding-right: calc((100% - 1232px)/2);
background-color: #000;
}
#FooterDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 19%;
display: block;
padding: 2%;
}
#FooterDiv2 {
clear: none;
float: left;
margin-left: 0;
width: 19%;
display: block;
padding: 2%;
}
#FooterDiv3 {
clear: none;
float: left;
margin-left: 0;
width: 19%;
display: block;
padding: 2%;
}
#FooterDiv4 {
clear: none;
float: left;
margin-left: 0;
width: 19%;
display: block;
padding: 2%;
}

Answer 1

Try adding this to clear the floats on the items contained with in;
#FooterWrapper:before,
#FooterWrapper:after {
content:"";
display:table;
}
#FooterWrapper:after {
clear:both;
}

Answer 2

This is because your #FooterWrapper does not contain float properties but your child divs have a float: left; property assigned.
So, if you add the below properties to #FooterWrapper than you can get the background color as expected.
#FooterWrapper {
width: 100%;
float: left;
}
Hope, this helps you.

Answer 3

Try this:-
body {
margin:0;
padding:0;
font: 100%/1.3 arial,helvetica,sans-serif;
background:#3F6A8A;
}
#FooterWrapper {
clear: both;
margin: auto;
max-width: 1232px;
display: block;
padding-left: calc((100% - 1232px)/2);
padding-right: calc((100% - 1232px)/2);
}
#FooterDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 19%;
display: block;
padding: 2%;
}
#FooterDiv2 {
clear: none;
float: left;
margin-left: 0;
width: 19%;
display: block;
padding: 2%;
}
#FooterDiv3 {
clear: none;
float: left;
margin-left: 0;
width: 19%;
display: block;
padding: 2%;
}
#FooterDiv4 {
clear: none;
float: left;
margin-left: 0;
width: 19%;
display: block;
padding: 2%;
}
<div id="FooterWrapper">
<div id="FooterDiv1"><img src="https://i.ytimg.com/vi/s9dbAfjlrks/maxresdefault.jpg" alt="American dental Association - Helmich Dental">
</div>
<div id="FooterDiv2">
</div>
<div id="FooterDiv3">
</div>
<div id="FooterDiv4">
</div>

Answer 4

Try this:-
body {
margin:0;
padding:0;
font: 100%/1.3 arial,helvetica,sans-serif;
background:#3F6A8A;
}
#FooterWrapper {
clear: both;
margin: auto;
max-width: 1232px;
display: block;
padding-left: calc((100% - 1232px)/2);
padding-right: calc((100% - 1232px)/2);
background-color:#000;
}
#FooterDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 19%;
display: block;
padding: 2%;
}
#FooterDiv2 {
clear: none;
float: left;
margin-left: 0;
width: 19%;
display: block;
padding: 2%;
}
#FooterDiv3 {
clear: none;
float: left;
margin-left: 0;
width: 19%;
display: block;
padding: 2%;
}
#FooterDiv4 {
clear: none;
float: left;
margin-left: 0;
width: 19%;
display: block;
padding: 2%;
}
<div id="FooterWrapper">
<div id="FooterDiv1"><img src="images/ada-logo.png" alt="American dental Association - Helmich Dental">
</div>
<div id="FooterDiv2">
</div>
<div id="FooterDiv3">
</div>
<div id="FooterDiv4">
</div>

Answer 5

Found another solution.. Tell me if I am on the right track.. Or are there errors or bad code? It seems to work well
http://qtest.pw
Thanks to all that contributed!!!
HTML
<div id="FooterWrapper">
<div id="FooterDiv1"><img src="images/ada-logo.png" alt="American dental Association - Helmich Dental" class="imagecenter">
</div>
<div id="FooterDiv2">
</div>
<div id="FooterDiv3">
</div>
<div id="FooterDiv4">
</div>
</div>
CSS
#FooterWrapper {
clear: both;
margin: auto;
overflow: hidden;
max-width: 1232px;
display: block;
padding-left: calc((100% - 1232px)/2);
padding-right: calc((100% - 1232px)/2);
background-color: #000;
}
#FooterDiv1 {
clear: both;
margin-left: 1.6%;
width: 23.4%;
display: block;
}
#FooterDiv2 {
clear: none;
width: 25%;
display: block;
}
#FooterDiv3 {
clear: none;
width: 25%;
display: block;
}
#FooterDiv4 {
clear: none;
margin-right: 1.6%;
width: 23.4%;
display: block;
}

Answer 6

If you add min-height: 170px your background color will display. Right now your footer doesn't have any height in the DOM so no color showing.