CODEWITHSUNDEEP
htmlcss
Luis
Luis

Reputation: 3277

list with background and float 'li'

I have a simple list:

<ul id="menu">
    <li>Homepage</li>
    <li>Contact</li>
    <li>About</li>
</ul>

CSS:

#menu {
    background: #000000;
    width: 984px;
}

#menu li {
    float: right;
    background: url('../images/menu_button.png');
    width: 166px;
    height: 36px;
    margin: 10px 15px;
}

It's horizontal menu as you can see (homepage | contact | about us).

But the #menu background (#000000) is not displayed (because of the float in the li tag). What can I do? I guess to insert clear: both somewhere..

Upvotes: 1

Views: 85

Answers (3)

Alireza
Alireza

Reputation: 6848

The code below will solve your problem: 

#menu {  
background: none repeat scroll 0 0 #000000;  
color: white;  
min-height: 50px;  
width: 984px;  }

EDIT:
If a varying height is the case then you should set min-height rather than height, and it will work like a charm.

Upvotes: 0

timezhong
timezhong

Reputation: 71

I think there are a number of ways to fix your problem:

  1. use :after pseudo-class (recommend)
    Demo: http://jsfiddle.net/timezhong/bjcuA/

  2. use float (common)
    Demo: http://jsfiddle.net/timezhong/SbLM2/

  3. use a combination of width and overflow:hidden (common)

  4. use a <br /> (not recommend)

  5. use a empty div with div#clear {clear:both} as it's styling (not recommend)

Upvotes: 2

Sotiris
Sotiris

Reputation: 40046

add overflow:hidden for your #menu, in this way you will clear the float.

Demo: http://jsfiddle.net/gRwBX/

Upvotes: 3

Related Questions