Help me style a form with css

http://jsfiddle.net/R9ejR/

I want to display some of the fields like height, weight, physique, e.t.c to show side-by-side, so I wrote a simple css showOnSide,开发者_C百科 which simply float:left the content, but when I add this class after an formelement, the element becomes unclickable. Any ideas?

Classes have to be separated by a single space, like li class="form_element showOnSide"

If you don't need the position:relative, then remove that. (thanks Maus).

Otherwise:

Solution in jsFiddle: Solution with clear and floats

It is hard to explain, but your li element after the floated one was sitting on top of your input element. Now the floating works as expected. Clearing is needed to force the listitems without ShowOnSide beneath the floats.