Background-color for ul/div element not rendered

Question

I am trying to display navigation items (horizontally) in a blue colored ribbon. Somehow, the background-color property is not getting applied to the ul element. I tried to put it inside a div element with background as blue. Still, it doesn't work

Html snippet as,

<div style="background-color:blue;">
  <ul style="list-style-type:none;background-color:blue;">
    <li style="float:left;margin-right:10px;">cassandra</li>
    <li style="float:left;margin-right:10px;">mongodb</li>
    <li style="float:left;">couchdb</li>
  </ul>
</div>

Solution 1

You are using float property for the li elements, so you need to apply some sort of clearfix for container to adjust it's size according to the content size. You can try with the overflow CSS property:

body > div { overflow: auto}

JSFiddle

Solution 2

Why is my background color not showing if I have display: inline?

This is the same issue as this. The div is coming out at height 0, same as the list as the float doesn't take up any space.

If you specify the height or tell them to display:inline-block it'll work.

Fiddle: http://jsfiddle.net/7vp4vz6f/

Solution 3

<div style="background-color: blue; overflow: hidden;">
  <ul style="list-style-type:none;background-color:blue;">
    <li style="float:left;margin-right:10px;">cassandra</li>
    <li style="float:left;margin-right:10px;">mongodb</li>
    <li style="float:left;">couchdb</li>
  </ul>
</div>