Why I can't change background color of div inside another div

Question

In my footer I have paragraph and I want to change background of her div tag, but I can't. I want to change background of div "bgdf", I tried using background-color: yellow;

HTML

<div class="container-fluid footer">
    <div class="row">
        <div class="col-xs-12">

            <img src="img/Gallery/fb.png" alt=""> &nbsp
            <img src="img/Gallery/twitter.png" alt=""> &nbsp
            <img src="img/Gallery/youtube.png" alt=""> &nbsp
            <img src="img/Gallery/myspace.png" alt="">


                <ol class="breadcrumb">
                    <li><a class="active">Home</a></li>  &nbsp
                    <li><a href="#">Gallery</a></li>  &nbsp
                    <li> <a href="#">FAQ</a></li>   &nbsp
                    <li> <a href="#">Contact</a></li>
                    <li> <a href="#">Blog</a></li>
                    </br>
                    <li><a class="active">Service</a></li>  &nbsp
                    <li><a href="#">Forum</a></li>  &nbsp
                    <li> <a href="#">Portfolio</a></li>   &nbsp
                    <li> <a href="#">About</a></li>
                </ol>

            <div class="bgdf">
                 <p><small>Copyright <span class="glyphicon glyphicon-copyright-mark"></span>  All Right Reserved | Testing Website </small></p>
             </div>

        </div>
    </div>
</div>

CSS

.col-xs-12 .breadcrumb{
    background-color: #2b2b2b;
}
.breadcrumb > li + li:before {
  content: none;
}
.breadcrumb li a    {
    color: white;
    font-family: TW Cen MT;
    font-size:17px;
}
.container-fluid  p{

      bottom: 0;
      position: absolute;
      margin-left: 34em;
    }
.breadcrumb {
    margin-bottom: 50px;
}

.bgdf{
    background-color: yellow;
}

Answer 1

Try to remove position: absolute; and watch what happens. You p inside .container-fluid is absolute against bottom 0 positioned and so there is nothing to display right now. At least when I try it.

Instead of setting the p absolute, set the .bgdf absolute against the bottom and it seems to work fine.

See this http://jsfiddle.net/y8pf36bs/

Hope this is what you are asking for.

Here is the final code from the final fiddle:

.col-xs-12 .breadcrumb{
    background-color: #2b2b2b;
}
.breadcrumb > li + li:before {
  content: none;
}
.breadcrumb li a    {
    color: white;
    font-family: TW Cen MT;
    font-size:17px;
}

.breadcrumb {
    margin-bottom: 50px;
}

.bgdf{
    background-color: yellow;
    bottom: 0;
    position: absolute;
    width: 100%;
}