Floating lists

I have two lists a ul > li:nth-child(odd) when I float the 1 3 5 list item is going to the right out of the normal document flow. I have tried the postion absoulute route but then I have no control or at least I think I dont of applying %percentages to the margins. What am I missing? I have tried inline-block but then once again it is acting really funny so I removed the nth child thing and then it is floated left and right but not beside each other stacking but left and right stacking.
I then floated the first item left and again the list is breaking apart 2 4 7 and 9 are on the right and the rest on the right I then added classes to the first and second list and applied the floats that way problem solved it seems it was conflicting My question is how to I have the second list display directly under the other list as soon as it breaks and jumps underneath the second list . It looks strange at about 500px to 900px screen length? Do I need a @ media rule what would I write?