Usually, I from the camp of getting it done as quick as possible. In competent web design, however, this can have implications. The mantra of modern web dev is heavily based in semantics - basically how a page is built through its markup.

When working quick, I take proven trails that sometimes need to be re-thought. Especially from a sementics perspective. Anyways, I alwasys used two (2) ULs floated left and padding to be a two-column effect.

The article suggested a much simpler one-list move. It floats the LIs forty-fifty percent of the UL width. Very simple, very effective.

I often overlook simpler solutions in code. This helps to become more aware of the possibilities - check it out:

ul.button{
list-style-type: none;
width: 550px;
margin: 0;
padding: 0;
}

ul.button li {
float: left;
width: 40%;
margin: 10px;
border: 1px #000 solid;
padding: 5px;
text-align: center;
background: #f3f3f3;
}