# Enforce only one row of floated elements

**URL:** <https://forum.kirupa.com/t/enforce-only-one-row-of-floated-elements/304023>\
**Category:** web dev\
**Created:** [January 31, 2010, 4:54am UTC](https://forum.kirupa.com/t/enforce-only-one-row-of-floated-elements/304023 "2010-01-31T04:54:46Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)\
**Post date:** [January 31, 2010, 4:54am UTC](https://forum.kirupa.com/t/enforce-only-one-row-of-floated-elements/304023/1 "2010-01-31T04:54:46Z")

</div>

I saw a cool horizontal playlist at the bottom of [www.grooveshark.com](http://www.grooveshark.com) . It’s made with Flash:

[![](http://forum.kirupa.com/uploads/kirupa/6117/1b1dbdf356cdd27a.jpg)](http://img97.imageshack.us/i/keshah.jpg/)

I was wondering if I could do the same with CSS.

```auto

<ul>
   <li><img src="1.jpg" /></li>
   <li><img src="2.jpg" /></li>
   <li><img src="3.jpg" /></li>
   <li><img src="4.jpg" /></li>
</ul>

ul {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10em;
    overflow: scroll;
}

ul li {
   float: left;
}

```

Currently, If there are too many

- , then I will just have multiple rows of playlist items. Is there anyway to enforce one row of playlist items and trigger a horizontal scrollbar when there are too many 
- to fit on the screen?

```auto

WRONG:
[] [] [] [] [] []
[] [] [] []

CORRECT:
[] [] [] [] [] []
<========-------->

```