css help with gallery slider

i have for example five divs, that has float:left and they are wrapped inside div, that has display:inline-block and width:auto. So result is one row with 5 divs and that row has width = sum of childs, because width:auto on div, that has display:inline-block results in width to fit content. Then i have all wrapped inside div, that has width = width of one of that 5 divs and overflow:hidden, so only one of that 5 divs is visible. But problem is, that 5 divs is not now in row, but is in column, because their parent is wrapped inside div with width = width of one of that 5 divs. I need animate margin-left on first of that 5 divs, so the next div becomes visible. But when that divs are in column and not in row, the look and feel while animating is not what i want. So how make something like this:

 ------1-------
 | -----------|---------2----------
 | | ----3--- | -----3-- --3----- |
 | | |      | | |      | |      | |
 | | |      | | |      | |      | |
 | | -------- | -------- -------- |
 | |          |                   |
 | -----------|--------------------   
 --------------

Only 1 must be visible. 1 has width = width of 3 and overflow: hidden, so only first of 3 is visible. 2 has display:inline-block and width:auto, so its width fit content. 3 has float left or display:inline-block.

Problem is when i wrap 2 into 1, then width of 2 is not to fit conent, but is width of 1 and becomes column and not row.

<div-1 style="overflow:hidden;width:64px;height:64px">
  <div-2 style="dis开发者_如何学Pythonplay:inline-block;width:auto">
     <div-3 style="width:64px;height:64px;float:left"></div>
     <div-3 style="width:64px;height:64px;float:left"></div>
     <div-3 style="width:64px;height:64px;float:left"></div>
  </div>
</div>

Div-2 is row, but when i wrap it inside div-1, it becomes column and that is what is unexpected. Sorry for my english.

---

First you should add clearfix to the div2 if you are floating its contents.

You could calculate the width with

var width = $('.div2').innerHeight();

$('.div2').css('width', width);

Here an example, set the .div1 { overflow: visible} to see the result:

http://jsfiddle.net/karameloso/Apz7B/

---

Have a look at the carouFredSel jQuery plugin, it automatically resizes the slider on the fly to fit the new slide's content.