Autoresize Element (div) To Fit Horizontal Content

I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails

Solution 1:

I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.

Solution 2:

Using this class for each individual item:

.eachItem {
   display: inline-block;
}

Will work (I've done something similar to that).

The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(

EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.