how can make following css more tidy , reasonable structure. if examine following code carefully. can find ul item occupying row ahead of, instead of containing, li items in box. change can make have ul encapsulate 4 li items?
when using floats on li's, taken out of flow of document, meaning ul no longer knows size of it's children, cannot expand it's size suit it's children.
put float on ul. http://fiddle.jshell.net/gghz8/2/
http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
when develop sites, float pretty everything. helps keep things consistent , avoids issues have now.