CODEWITHSUNDEEP
csshtmlwidthoverflowhidden
Jim
Jim

Reputation: 63

inline divs with hidden overflow

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>

Upvotes: 5

Views: 26933

Answers (4)

Glycerine
Glycerine

Reputation: 7347

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>

Upvotes: 1

Paul
Paul

Reputation: 1122

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.

Upvotes: 3

David Tang
David Tang

Reputation: 93684

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

Upvotes: 7

Quentin
Quentin

Reputation: 943754

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

Try inline-block instead.

Upvotes: 1

Related Questions