Div åker ner när den inte ska

Det som händer är förväntat.

Testa att sätta en min-width på det omgivande elementet.

Sånt är livet när man floatar boxar med dynamisk bredd.

Du kan komma bort från det om du använder en table (Sluta jönsa om att det MÅSTE vara data för att få använda table).

Sen har du id="food" på all adiv:arna som innehåller vad det är för mat - ett ID ska vara unikt egentligen, så du borde sätta CSS-klassen på class istället dvs class="menu-food-description" eller liknande

Gör först och främst om id:n till klasser — det får bara finnas ett element med ett specifikt ID på en sida. Ta sedan bort alla jävla floats och clearer divs, du behöver inte en flytande layout för det där.

Antingen kan du göra en layout med en UL som du har det nu, eller så kan du använda en table, vilket passar bra i detta fall. Här är en alternativ variant som använder sig av listor och absotiv (absolut + relativ) positionering: http://jsfiddle.net/VvxuY/1/