Question: I've got a list with list-style-none which needs to be able to add new items to itself via Ajax and have the background expand appropriately when it does. Adding via Ajax is easy, but every solution I try for the background fails me. I don't know if it's even possible; is it? I'm using a grid like this one:

<http://jqueryui.com/demos/sortable/#display-grid>

Both WebKit and Firebug are showing me skinny, empty bars when I hover over the enclosing divs and/or the enclosing ul tag. It appears that the minute you set a list loose with list-style-none and float:wherever, you give up control over its background. But that can't be right.

Answer: 
This is something I've run into a number of times. The problem is that floated elements aren't part of the normal box model, so they don't cause their parent elements to expand **unless** their parent elements are also floated. So if possible, float the ul or containing div.

Edit:
See [quirksmode](http://www.quirksmode.org/css/clearing.html) for another css-only workaround.
You need to explicitly set the width and height for the area.

Check out this link for Horizontal Scrolling: <http://valums.com/scroll-menu-jquery/>

Here is the script:

```
$(function(){
  //Get our elements for faster access and set overlay width
  var div = $('div.sc_menu'),
               ul = $('ul.sc_menu'),
               // unordered list's left margin
               ulPadding = 15;

  //Get menu width
  var divWidth = div.width();

  //Remove scrollbars
  div.css({overflow: 'hidden'});

  //Find last image container
  var lastLi = ul.find('li:last-child');

  //When user move mouse over menu
  div.mousemove(function(e){

    //As images are loaded ul width increases,
    //so we recalculate it each time
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

    var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
    div.scrollLeft(left);
  });
});

```

Basically, you need to update the `ulWidth` and `divWidth` when you add the new item.

Then just set the background image to repeat horizontally and you should be set.

```
ul.sc_menu {background:transparent url(image.png) repeat scroll 0 0;height:100px}

```

**Note: You will need to set the height; otherwise you will not see the background because the li are floated.**