Why background-color doesn't work?

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;
    }

In any case, a duplicate of [container div not applyin background-color to the two floating divs inside it](http://stackoverflow.com/questions/18048102/container-div-not-applyin-background-color-to-the-two-floating-divs-inside-it) — JJJ, Oct 25 '14 at 13:39
http://jsfiddle.net/victor_007/smenr5nq/11/ i think you want this — Vitorino fernandes, Oct 25 '14 at 13:43
My apology: Ther was a wrong jS fiddle link. I removed it now. However, pbaldauf's answer solved my issue. — Jabir, Oct 25 '14 at 13:46

score 2 · Accepted Answer · answered Oct 25 '14 at 13:41

2

Add overflow: auto in your css:

#footer_box{
    overflow: auto;
    border-top:2px solid #009933;
    background-color:green;
}

Here's a Fiddle.

answered Oct 25 '14 at 13:41

pbaldauf

1,671
2
23
32

it works, 100%. though I put a wrong link in js fiddle. Thank you very much. – Jabir Oct 25 '14 at 13:45

sticksu · Answer 2 · 2014-10-25T13:47:12.330

1

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.

edited Oct 25 '14 at 13:47

answered Oct 25 '14 at 13:40

sticksu

3,660
3
23
41

Replace the "." with " ", there is no need to pollute it with anything else than whitespace. Removes the need for line-height as well. :) – adrenalin Oct 25 '14 at 13:44
Thank you, I didn't noticed it, I just took the first clearfix class I found on google. :) – sticksu Oct 25 '14 at 13:45
`content: " "`, not `content: ""` since the latter effectively doesn't do anything. And I wouldn't be so bold as to use `.clearfix{display: inline-block;}` since you can use this for several other block levels as well, like `block`, `table` and `inline`. – adrenalin Oct 25 '14 at 13:46

score 0 · Answer 3 · answered Oct 25 '14 at 13:46

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>

score 0 · Answer 4 · answered Oct 25 '14 at 13:46

0

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

answered Oct 25 '14 at 13:46

DodoSombrero

767
3
15
29

i edited my post, there was a wrong link. however, pbaldauf's answer helped me. and you gave a same suggestion thoug. – Jabir Oct 25 '14 at 13:47
oh sorry, I didn't see the update when I posted it :) pbaldauf's answer is the same about the `overflow`, I'm talking about the `
`. They are not used much, better if you style a margin between each line manually by enclosing each sentence in a `
` `
` has certain browser compatible issues,[CLICK HERE](http://stackoverflow.com/questions/1726073/is-it-sometimes-bad-to-use-br)
– DodoSombrero Oct 25 '14 at 13:51

Why background-color doesn't work?

4 Answers4