Unexpected layout with jquery ui

Question

I'm trying to develop a page using jquery ui. Everything looks fine except for under the menu>beverages section the last to definition list appear out of place. The first shows up on a row alone in the center while the last is on a row alone to the left. You can view it here.

Answer 1

Seems fine since you're floating them all left. That's what I would expect to happen. If you want them to be able to drop down to the next line should they exceed the width of the div, change your dl CSS to:

dl{
    display:inline-block;
    vertical-align:top;
    padding-right: 10px;
}

jsbin example