inline divs with hidden overflow
Solution 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.
Solution 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 naturallyinline
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;
.
Solution 3
You are trying to set a width on an element that is display: inline
.
Try inline-block
instead.
Solution 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>
Jim
Updated on January 17, 2020Comments
-
Jim over 4 years
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>
-
Jim over 13 yearsThis way the divs are still displayed one over the other and not side by side.
-
Jim over 13 yearsThis way the divs are still displayed one over the other and not side by side.