inline divs with hidden overflow

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

display: inline doesn't let you set width. You should use display: inline-block instead.

Cross-browser issues:

• This won't work properly with IE, which only allows inline-block on naturally inline elements, such as <span>s, so you can either convert the <div>s into <span>s or, use an IE hack: display:inline-block; zoom:1; *display:inline;

• And for Firefox v2 and lower, you'll need display: -moz-inline-stack;.

Answer 2

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.