Forcing overflowing floats onto one line

hxhl95

Hiya everyone, I have a dynamically generated (using the innerHTML property) set of list items that're floated into a 4-column list like follows:

The container that this list is in has to be able to dynamically resize. I've added overflow:auto to add scrollbars when the content in the box overflows. BUT, when the container is resized small enough, instead of having a horizontal scrollbar (the vertical one works fine) the rightmost <li> gets pushed down to the next line instead of staying on one line with the other 3 <li>s and overflowing off the side of the window, making a scrollbar appear. I've already tried white-space:nowrap in half a dozen places. Refuses to work. I can't use a table either, as dynamically writing a table causes a runtime error in IE and I want this code to be as compatible as possible. Any help would be greatly appreciated (note the extreme emphasis on greatly)