How to make an infinite horizontal container with fixed height

Question

I have built the following webpage:

http://tarjom.ir/demo/niazer/

Then What do I need?

as you see the last part of the page is a row of Icons and thumbnails that when you hover your mouse [the hovered item] expands. I need at least ten more thumbnails to be there which causes the display to break to next line and makes it two rows of thumbnails (which could break to three and more even with more thumbs).

I want a container which displays 1200px of width but contains elements to an infinite width (8000px or more). How should I achieve this?

Here is the CSS for these elements: Main horizontal wrapper, each thumnbail wrapper

.main-cat-wrapper
{
  float: left;   
   margin-right: 15px;
  margin-bottom: 50px;
  width: 100px;
  overflow: hidden;
  height: 105px;
}
.main-cat-wrapper:hover
{
    border-right: 1px #CCC dotted;
    cursor: pointer;
     background-color: #F9F9F9;
     box-shadow: 1px 1px 1px rgba(0,0,0,0.05);
}
.main-cat-wrapper img
{
    display: block;
    float: left;    
}
.main-cats
{

    height: 150px;
    position: absolute;
    left: 22.5%;

}

.main-cats is the wrapper responsible for holding all thumnails.

Answer 1

You can try this :

.main-cats {
  width:1200px;
  overflow: hidden;
  white-space:nowrap;
}

And instead of float use display:inline-block :

.main-cat-wrapper {
  display:inline-block; 
}

Review this demo http://jsfiddle.net/WFW25/3/ I set overflow:auto only to see the other elements in the block.

Answer 2

Maybe something like this:

var eleWidth = 0;
$('.inner div').each(function(){
    eleWidth += $(this).width()
}).hover(function(){
    $('.inner').width(eleWidth+50)
}, function(){
    $('.inner').width(eleWidth)
})

$('.inner').width(eleWidth)

Demo

You can tweak it to your needs.