Why background-color doesn't work? - html

Question

I am trying to set background-color for my footer, but it doesn't really change the background color.
This is what I have done so far.
In my code: I have wrapped the footer by body tag. That means the footer is inside the body tag.
.HTML:
<footer>
<div id="footer_box">
<p id="footer_text_left">
© 7 seas<br />
En del av 7seas Money Transfer KB<br />
F-skatt registrerat <br />
Org, Nr: <br />
SEB Företagskonto: <br />
BG:
</p>
<p id="footer_text_middle">
Besökadress:<br />
218 41 Bunkeflostrand<br />
Malmö, Sweden <br />
Web:
</p>
<p id="footer_text_right">
Tel: <br />
Mob: <br />
e-Mail:
</p>
</div>
</footer>
.CSS:
#footer_box{
border-top:2px solid #009933;
background-color:green;
}
#footer_text_middle, #footer_text_right{
font-size:12px;
font-family:Euphemia;
float: left;
width: 28%;
margin: 0 1%;
padding-bottom:15px;
}
#footer_text_left{
font-size:12px;
font-family:Euphemia;
float: left;
width: 31%;
margin-left: 120px;
padding-bottom:15px;
}

Answer 1

Add overflow: auto in your css:
#footer_box{
overflow: auto;
border-top:2px solid #009933;
background-color:green;
}
Here's a Fiddle.

Answer 2

You need to use a clearfix class on your footer_box element:
<div id="footer_box" class="clearfix">
And add this in css:
.clearfix:after {
content: " ";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
Now it should work.

Answer 3

Just add the green color background to the #footer_text_left, #footer_text_middle, and #footer_text_right <p> tags.
#footer_box, #footer_text_left, #footer_text_middle, #footer_text_right{
border-top:2px solid #009933;
background-color:green;
}
#footer_text_middle, #footer_text_right{
font-size:12px;
font-family:Euphemia;
float: left;
width: 28%;
margin: 0 1%;
padding-bottom:15px;
}
#footer_text_left{
font-size:12px;
font-family:Euphemia;
float: left;
width: 31%;
margin-left: 120px;
padding-bottom:15px;
}
<div id="footer_box">
<p id="footer_text_left">
© 7 seas<br />
En del av 7seas Money Transfer KB<br />
F-skatt registrerat <br />
Org, Nr: <br />
SEB Företagskonto: <br />
BG:
</p>
<p id="footer_text_middle">
Besökadress:<br />
218 41 Bunkeflostrand<br />
Malmö, Sweden <br />
Web:
</p>
<p id="footer_text_right">
Tel: <br />
Mob: <br />
e-Mail:
</p>
</div>

Answer 4

Adding: overflow:auto; should do the trick
Not Related to your question, the use of <br/> is a bit frowned upon. it would be better if EACH sentence is stored into a <p> and given a class with a margin-bottom for example.
Just a thought though