Почему мой список не плавает внутри моего второго div?

Question

Это мой HTML:

<div class="topmenucontainer"> 
    <div id="topmenu"> 
    <ul> 
    <li style="border-right: 1px solid black;"><a href="">Login</a></li> 
    <li><a href="">Partner Countries</a></li> 
    </ul> 
    </div> 

Это мой CSS:

.topmenucontainer { 
    margin:0 auto; 
    border:1px solid red; 
    background-color:#000; 
    display:block; 
} 

#topmenu { 
    margin:0 auto; 
    border:1px solid red; 
    /*min-height:25px;*/ 
    background-color:#fff; 
    width:900px; 
    display:inline; 
} 

#topmenu ul { 
    margin:0px; padding:0px; 
    list-style-type: none; 
    float:right; 
} 

#topmenu ul li { 
    float:left; 
} 

И это, как он отображается

http://img842.imageshack.us/img842/8627/3ktn.jpg

Почему UL не отображается, когда Я поместил его? Я имею в виду, почему он не отображается внутри моего topmenu div, который имеет белый фон и ширину всего 900 пикселей?

Answer 1

Вы должны добавить ясно: как Div, чтобы справиться с внутренней плавающей

<div class="topmenucontainer"> 
    <div id="topmenu"> 
     <ul> 
     <li style="border-right: 1px solid black;"><a href="">Login</a></li> 
     <li><a href="">Partner Countries</a></li> 
     </ul> 
     <div style="clear:both;"></div> 
    </div> 
</div> 

Answer 2

Я думаю, что вам не нужны никакие стили на вашем .topmenucontainer*. вы можете избавиться от .topmenucontainer

Вы можете попробовать следующие стили на topmenu. У вас есть окончательная картина того, чего вы пытаетесь достичь?

#topmenu { 
    overflow: hidden; 
    margin: 0 auto; 
    border: 1px solid red; 
    background-color: #fff; 
    width: 900px; 
}