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>

Luciusluck

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.

Sudorific

Answer 2

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;.

Auberge

Answer 3

You are trying to set a width on an element that is display: inline.

Try inline-block instead.

Elisaelisabet

This way the divs are still displayed one over the other and not side by side. – Luciusluck

Answer 4

float the three divs left. That'll work

<div style="width:50px;height:349px; overflow:hidden; border solid 1px;">
   <div style="float:left;width:100px; border solid 1px">first div</div>
   <div style="float:left;width:100px; border solid 1px;">second div</div>
   <div style="float:left;width:100px; border solid 1px;">third div</div>
</div>

Corrected:

I'm very sorry - I undid some edits. I've changed the width values on the parent div to show the example - so edit it as you please.

<div style="width:120px;height:349px; overflow:hidden; border: solid 1px;">
   <div style='height: 349px; width: 310px'>
    <div style="float:left;width:100px; height: 100px; border: solid 1px">first div</div>
    <div style="float:left;width:100px; height: 100px; border: solid 1px;">second div</div>
    <div style="float:left;width:100px; height: 100px; border: solid 1px;">third div</div>
   </div>
</div>

Cytherea

This way the divs are still displayed one over the other and not side by side. – Luciusluck