Question

I’ve a problem with a a HTML UL list. See the following sample:
http://uploads.demaweb.dk/li.html

I would like the two menus to be displayed in on line and centered. How can I do that?

I’m not able to change anything inside the divs with the menu-class since they are generated by a CMS.

Answer 1

You can do this… if I read the question correctly

Add text-align:center; to .container

and

display:inline-block; to .menu

  .container {
    width:800px;
    background-color:#e0e0e0;
    text-align:center;
  }

  .menu {
     margin:auto;
     display:inline-block;
  }

Example: http://jsfiddle.net/jasongennaro/8BAjV/

EDIT

Your solution is almost working – except from situations where the
lists does not have the same height.

In that case, add vertical-align:top;

.menu {
    margin:auto;
    display:inline-block;
    vertical-align:top;
}

Revised example http://jsfiddle.net/jasongennaro/8BAjV/2/