Question: I'm looking for a way to create a scrollable DIV that does not wrap without using a table. Here's what I've tried:

**HTML:**

```
<div>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

```

**CSS:**

```
DIV { width: 100px; height: 50px; overflow: auto; }
UL LI { float: left; border: 1px solid; }

```

**Fiddle:** <https://jsfiddle.net/JGZJj/>

However, the list of items will still wrap to a new line once it passes the 100px div. If I try the same thing with a table, for example:

**HTML:**

```
<div>
    <table>
        <tr>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
            <td>Item</td>
        </tr>
    </table>
</div>

```

**CSS:**

```
DIV { width: 100px; height: 50px; overflow: auto; }
TR TD { border: 1px solid; }

```

**Fiddle:** <https://jsfiddle.net/kWwER/>

Then all items display on a single row and do not wrap. Is there a way to get this behavior without using a TABLE tag? Thanks!

Answer: 
If you change your CSS (assuming use of ul/li tags) from:

```
div { width: 100px; height: 50px; overflow: auto; }
li { border: 1px solid; }

```

to:

```
div { width: 100px; height: 50px; overflow-x: scroll; white-space: nowrap; }
li { border: 1px solid; display: inline; }

```

That should take care of it for you. Here's the [jsFiddle result](http://jsfiddle.net/jwiscarson/tjy6e/1/).

**As an aside:** I'd like to add that you should avoid selectors like `TR TD` or `UL LI` whenever possible.

1. `<li>` and `<td>` tags should always follow `<tr>` and `<ul>` tags.
2. Descendant selectors [are really expensive](https://developer.mozilla.org/en/writing_efficient_css#Avoid_the_descendant_selector).

In these situations, you're asking the browser to look for any `<td>` tag that's any descendant of any `<tr>` tag, so it's looking through every level of hierarchy beneath every `<tr>` tag. If you **absolutely have to** use descendants, try to limit them to one level of hierarchy by using a selector like `tr > td`. Even better would be to assign a class to the elements you want to modify, and write your CSS against that selector.
On any block element with a fixed height, put the css attribute `overflow:scroll`

Should make your element scrollable with a scrollbar when it's contents bust the fixed height.