Question

How do I center an element of unknown width containing elements that have display: block but are all floated to one side?

Basically I have a menu that has a number of items that have display: block (because they need to have proper padding), but are all in one line.

I’ve made an example on jsFiddle where the green menu has to be centered inside the pink element, and the pink element has to accomodate the height of the green menu.

Edit: sorry, wrong example, updated with the correct example

Answer 1

Rather than doing this with floats, it can be achieved using display: inline-block.

So #mainmenu li would become:

#mainmenu li {
   display: inline-block;
   *display: inline;      /* add this for IE7 as it does not */
   *zoom: 1;              /* support display: inline-block */   
}

Example JsFiddle: http://jsfiddle.net/SKLZ7/6/