Render all listitems on one line

[Gamps try]

Given following HTML + css.
The goal is to have a scrollable div (only horizontal) so that all the content is on one visual line.

Now it renders on multiple lines.

Hope you can help me :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>foo</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body>

<style type="text/css">
        ul#display-inline-block-example,
        ul#display-inline-block-example li {
            /* Setting a common base */
            margin: 0;
            padding: 0;
        }

        ul#display-inline-block-example li {
            display: inline-block;
            width: 100px;
            min-height: 100px;
            background: #ccc;
            vertical-align: top;
            /* For IE 7 */
                    zoom: 1;
            *display: inline;
    }
</style>

<div>
<ul id="display-inline-block-example">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
    <li>Item one</li>
        <li>Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two</li>
    <li>Item three</li>
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
        <li>Item one</li>
            <li>Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two</li>
    <li>Item three</li>
        <li>Item three</li>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
            <li>Item one</li>
                <li>Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two</li>
    <li>Item three</li>
        <li>Item three</li>
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
            <li>Item one</li>
                <li>Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two</li>
    <li>Item three</li>

</ul>
</div>


</body>
</html>

[Dormilich]

look into the overflow CSS-Property.