I have never seen any one code a list like that, but you need to post ALL the code you are using for that list. Remember, floating removes that content from the document flow and floats may need to be cleared as some point.

as per Major Paynes reply the code is a little odd, however that doesn't detract from how it could be done as a <li> element can contain any other element. If the four items inside the <li> element of your code are another list then it might be more natural to code them as a nested list, but the "how to" code is the same no matter which way you do it. Best way to decide is to look at it without any CSS applied and see what looks better or more natural.

your

white-space:nowrap;

is the right choice, but as that will only force "white-space" - the white bits between words, or inline elements - not to break, not the space between blocks (your floats) you need to think a bit different. Another clue that this doesn't appear to be a job for floats is that they will 'wrap' as is their nature, because they will "float" into the available space ;) Float is a fairly stubborn property, there's not much you can do to force a floated element to go against it's nature!

This is a job for inline elements really and if you then want those inline elements to be formatted like a block i.e. to have padding/margin/widths applied it would inline-blocks you're after, either way your white-space/overflow logic should then work

There is a gotcha for IE when using

display: inline-block

but it's not insurmountable ;)

Here's some code and while I have coded it as nested lists you would simply replace the

ul.main ul li

with

ul.main div

or

ul.main span

for it to do the same thing

IE workaround notes:

• IE needs the

  display:inline-block;

  bit set first too so the bit in the main code needs to remain, and also IE8 does use it properly too.
  
• The span would not need the IE workaround because inline-block does work properly for inline elements in IE
  
• I can't remember which version of IE started to use inline-block properly I only think it was 8 so please test this code in 7 I haven't (have tested 6 & 8) .. it's possible that the conditional comment might need to be applied to LT IE 7
  

CSS:

<style type="text/css" media="screen">
ul.main, ul.main ul {margin: 0; padding: 0; list-style: none;}
ul.main {width: 500px; padding: 0 0 0 10px; background: #ffc;}
ul.main li {white-space: nowrap; overflow: hidden;}
ul.main ul li {display: inline-block; margin: 10px 0;}
</style>

<!--[if LT IE 8]>
<style type="text/css" media="screen">
ul.main ul li {display: inline;} /* to make lesser IE versions display block elements as an inline-block; but still needs inline-block set earlier in the code */
</style>
<![endif]-->

HTML:

<ul class="main">
<li>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</li>
</ul>

Note: if you don't need your "side by side" elements to have padding, widths, or margins then simply setting them to

display: inline;

- with no need for the extra IE workaround should also work
e.g. in my code

ul.main ul li {display: inline;}