Question

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="display: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.

Answer 1

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/