Question

I have a problem concerning CSS and HTML.

I’m trying to wrap a DIV around another element (an UL in this case) and having it wrap around it and at the same time keeping both centered. As an added bonus I can’t set a specific width since the width of the content inside the wrapping DIV have to be dynamic (since this is basically a template).

I’ve tried floating, and that works as far as wrapping goes, but then the thing ends up either to the right or to the left.

I’m going a bit crazy over this, and google is no help!

Thanks in advance!

UPDATE:

Sorry about not including code or images. This is what I’m trying to do illustrated with images:

One state of the UL width

Another state of the width

The wrapping DIV can’t stretch the full width of the container. It has to wrap around the UL.

The dark grey is the DIV around the UL. I need the DIV to wrap around the UL (which has a horizontal layout) no matter the width of the content, since like I said above, the content of the UL is going to by different from time to time. The text in the LIs are going to change.

I also need it to be centered. I’ve made it work with float left and float right, but I need it to be centered.

This is the code I’m currently using for the container DIV and the UL and LI elements:

#container{
    height: 100px;
    width: 500px;
    font-size: 14px;
    color: #grey;
    display: table-cell;
    vertical-align: middle;
}
#container ul{
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
}
#container li{
    background: url(checkmark.png) center left no-repeat;
    display: inline;
    padding-left: 20px;
    margin-right: 5px;
}
#container li:last-child{
    margin-right: 0;
}

Answer 1

UPDATED

I got it. Is it this you were looking for?? http://jsfiddle.net/vZNLJ/20/

#wrapper {
    background: #ccc;
    margin: 0 auto; /* to make the div center align to the browser */
    padding: 20px;
    width: 500px; /* set it to anything */
    text-align: center;
}
#wrapper ul {
    background: #aaa;
    padding: 10px;
    display: inline-block;
}
#wrapper ul li {
    color: #fff;
    display: inline-block;
    margin: 0 20px 0 0;
}
#wrapper ul li:last-child {
    color: #fff;
    display: inline-block;
    margin: 0;
}

<div id="wrapper">
    <ul>
        <li>Menu</li>
        <li>Menu</li>
        <li>Menu</li>
    </ul>
</div>