Imagine having five divs, each with float:left property, enclosed within a parent div with display:inline-block and width:auto. This arrangement results in a single row containing the 5 divs, with the width of the row being equal to the sum of the child divs due to the behavior of width:auto with display:inline-block. Now, when all of this is wrapped inside another div that has a width equal to one of the 5 divs and overflow:hidden, only one of the 5 divs is visible. However, a problem arises as the 5 divs now appear in a column rather than a row, since their parent is wrapped inside a div with the same width as one of the child divs. I want to animate the margin-left property on the first div so that the next div becomes visible. But because the divs are now displayed in a column instead of a row, the animation does not produce the desired effect.
------1-------
| -----------|---------2----------
| | ----3--- | -----3-- --3----- |
| | | | | | | | | |
| | | | | | | | | |
| | -------- | -------- -------- |
| | | |
| -----------|--------------------
--------------
Only the first div (1) should be visible. Div 1 has a width equal to that of Div 3 and has overflow:hidden, showing only the first of the 3 divs. Div 2 has display:inline-block and width:auto, adjusting its width according to content. Div 3 has either float left or display:inline-block.
The issue arises when I wrap div 2 into div 1, causing the width of div 2 to no longer fit its content and transforming it from a row to a column unexpectedly.
<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>
Although div 2 appears as a row, wrapping it inside div 1 transforms it into a column unexpectedly. My apologies for any confusion or language barriers.