Question

I want to create 3 divs side by side when only one of them is visible.

-------------- -------------- --------------
| visible    | | invisible  | | invisible  |
|            | |            | |            |
-------------- -------------- --------------

In order to do this I have tried to create a wrapping div with a 100px width, and hidden overflow. What am I doing wrong?

<div style="width:50px;height:349px; overflow:hidden">
<div style="display: inline;">first div</div>
<div style="display: inline;">second div</div>
<div style="display: inline;">third div</div>
</div>

Answer 1

You have to make the wrapping div big enough (in width) to hold all three of the divs. Then you could wrap another div around that with the overflow hidden.