why isn't my list floated inside my second div? - html

Question

This is my HTML:
<div class="topmenucontainer">
<div id="topmenu">
<ul>
<li style="border-right: 1px solid black;">Login</li>
<li>Partner Countries</li>
</ul>
</div>
This is my 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;
}
And This is how it is displayed
http://img842.imageshack.us/img842/8627/3ktn.jpg
Why the UL isn't displayed where I putted it?I mean why isn't it displayed inside my topmenu div which is white backgrounded and only 900px wide?

Answer 1

You need to add a clear:both div to handle the inner floating
<div class="topmenucontainer">
<div id="topmenu">
<ul>
<li style="border-right: 1px solid black;">Login</li>
<li>Partner Countries</li>
</ul>
<div style="clear:both;"></div>
</div>
</div>

Answer 2

I think you don't need any styles on your .topmenucontainer*. you can get rid of the .topmenucontainer styles
you can try the below styles on topmenu. Do you have a final picture of what you are trying to achieve?
#topmenu {
overflow: hidden;
margin: 0 auto;
border: 1px solid red;
background-color: #fff;
width: 900px;
}