Not getting gray background

Question

enter code hereI have the following html/php:

<div class="footerbottom">
<span class="footermenuitem">
<span class="footermenutitle">PRODUCTS</span>
<?php $menu = menu_navigation_links('menu-products');
print theme('links__menu_products', array('links' => $menu)); ?>
</span>

<span class="footermenuitem">
<span class="footermenutitle">APPLICATIONS</span>
<?php $menu = menu_navigation_links('menu-applications');
print theme('links__menu_applications', array('links' => $menu)); ?>
</span>

<span class="footermenuitem">
<span class="footermenutitle">BRANDS</span>
<?php $menu = menu_navigation_links('menu-brands');
print theme('links__menu_brands', array('links' => $menu)); ?>
</span>

</div>

And the following CSS:

.footerbottom {
background-color: #2b2b2b;
color: #cccccc;
width: 100%;
z-index: 3;
margin-top: 200px;
}
.footerbottom ul {
list-style: none;
}
.footerbottom li a {
color: #cccccc;
}
.footerbottom li a:link {
color: #cccccc;
}
.footerbottom li a:visited {
color: #cccccc;
}
.footerbottom li a:hover {
color: #cccccc;
}
.footerbottom li a:active {
color: #cccccc;
}
.footermenutitle {
font-size: large;
color: #fdbe6e;
}
.footermenuitem {
float: right;
margin-right: 20px;
}

For some reason, the background of all of this area is not gray. Why is that? How do I fix that?

just give .footerbottom class a property, float: left, find here http://jsfiddle.net/ymL22/ — m-t, Oct 23 '13 at 05:34
thats your another question, but i think each div need to be set as default — m-t, Oct 23 '13 at 05:38

score 3 · Accepted Answer · edited May 23 '17 at 10:25

The issue is that your .footerbottom contains floating elements, and hence you need to clear them, declare overflow: hidden; property for footerbottom

.footerbottom {
   background-color: #2b2b2b;
   color: #cccccc;
   width: 100%;
   z-index: 3;
   margin-top: 200px;
   overflow: hidden;
}

Demo

Well, that's a quick fix but not much better, if you are not looking to support older IE versions, if you want, use a clearfix class on the parent element to self clear it..

.clear:after {
   content: "";
   clear: both;
   display: table;
}

<div class="footerbottom clear">
   <!-- ... Other code -->
</div>

Demo 2

Refer my answers here and here for more information about this behavior

score 1 · Answer 2 · answered Oct 23 '13 at 05:37

1

Add a height to:

.footerbottom {
background-color: #2b2b2b;
color: #cccccc;
width: 100%;
height: 200px
z-index: 3;
margin-top: 200px;
}

answered Oct 23 '13 at 05:37

Sergio Wizenfeld

492
3
12

This is not a better solution as if the content will grow, it will simply overflow because you are assigning a fixed height to the element. – Mr. Alien Oct 23 '13 at 05:42

Not getting gray background

2 Answers2