How to bring the parent element with floated child elements to the center of the document?
- by Starx
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?
