How to bring the parent element with floated child elements to the center of the document?

Question

I have organized a menu. Its HTML is as follows:

   <ul class="topmenu">
          <li><a href="sample.html">Text 1</a></li>
          <li><a href="sample.html">Text 2</a></li>
          <li><a href="sample.html">Text 3</a></li>
          <li><a href="sample.html">Text 4</a></li>
   <ul>

This is a horizontal menu, so I have floated the list items to left to appear them in a horizontal line. I could have used display:inline to appear them in a single line, but since IE does not support it and I don't know any other way to do so, I used float:left;.

It's css is:

.topmenu {
    list-style:none;
    margin:0;
    padding:0;
}
.topmenu li {
    float:left;
} 

This brings the menu in a perfect horizontal line, but the entire list is floated to the left. I want to bring the .topmenu to appear in the center of the document and keep the listitem inside it floated towards the left.

I found that this is achievable by defining width property of the .topmenu, but I dont want to fix its width as the list-items are dynamically generated and thus could increase and decrease.

Any one know of any solution?

Answer 1

display: inline is supported fine by all versions of IE. It's inline-block that isn't supported completely in IE 6 and 7 (source).

This should be solvable by simply switching to display: inline.

Answer 2

Here is the solution without using width:)