Id like to keep the `<li>`s aligned evenly at the top, here's my CSS:

```
ul {
   list-style-type:none;
   margin:0;
   padding:0;
   width:510px; 
}

li {
   width:230px;
   border:1px solid #ccc;
   padding:5px;
   float:left;
   margin:5px 5px 0 0;  
}

```

Here is [in action](http://jsfiddle.net/t6tML/).

Any way to align the top of the `<li>`s evenly?  

Here is a picture of what I would like it to be:
![Example layout](https://i.stack.imgur.com/5W2lX.png)