HTML/CSS Making a list be in rows, 3 boxes per row?

Question

<ul>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
    <li>item1</li>
</ul>

Let's say each box is 150px wide, so total width per row is 450px. What I am trying to do is, automatically make the list allow only 3 boxes (list elements) per row, and not make it go under each other.

I've tried something, and not just asking before trying!

There's my attempt:

<div class="container">
    <ul>
        <li>hreyyy</li>
        <li>hreyyy</li>
        <li>hreyyy</li>
        <li>hreyyy</li>
        <li>hreyyy</li>
        <li>hreyyy</li>
    </ul>
</div>

.container {
    width: 450px;
}

.container ul li {
    width: 150px;
    height: 100px;
    background-color: red;
    float: left;
}

.container ul {
    display: inline;
}

Result:

_{(source: gyazo.com)}

It' doesn't function as I wanted, why?

Is there a plugin for it that makes life easier?

Answer 1

You don't need to set the UL to display as an inline object. Instead, do something like this:

.container {
    width: 450px;
}
.container ul {
    padding: 0; /* remove default padding and all margins! */
    margin: 0;
    list-style-type: none; /* remove the • */
}
.container ul li {
    width: 150px;
    height: 100px;
    background-color: red;
    float: left;
}

Result: http://jsfiddle.net/f896G/