How to lay-out list items like a grid with CSS and HTML?

Question

I have a div block which does not have a fixed width.

Inside, I have an <ul> <li>..</li> block with 11 items. I would like these <li> items to be listed inside the div, all with equal widths like this:

##item##  ##item##  ##item##
##item##  ##item##  ##item##
##item##  ##item##  ##item##
##item##            ##item##

However, I can't sort it out at all.

I tried float left and right but the central 3 elements will not be centered.

What can I do to get this working?

Thanks!

Answer 1

The "Inline Blocks" link that Jordan posted is a great resource, particularly when it comes to older browser support. For quick reference for others landing on this page off of google, the basic css for creating a centered, inline-block grid is:

ul {
    margin: 0 auto;
    text-align: center;
}

li {
    display: inline-block;
    vertical-align: top;
}