CSS overflow hidden

Question

I have a container div. Inside that div are three graphs aligned at 700px intervals (the width of the container). The idea is that the other 2 graphs will be hidden off screen which I can then, with jQuery, slide across when a user interacts with various controls on the web page.

A simplified version of my code is like so:

Style

    #graphcontainer {
        height: 260px;
        overflow: hidden;
        width: 700px;
    }
    .graph {
        position: absolute;
    }

HTML

<div id="graphcontainer">
        <div class="graph" style="left: 0px;"></div>
        <div class="graph" style="left: 700px;"></div>
        <div class="graph" style="left: 1400px;"></div>
</div>

For some reason the second and third graphs, which are positioned off to the right, are still visible! How do I ensure they are not visible?

Sotiris · Accepted Answer · 2011-02-25 15:20:53Z

3

First you have to set, position:relative for the parent. Then, you have to set the height of the parent.

Demo: http://jsfiddle.net/Scfdk/

answered Feb 25, 2011 at 15:20

Sotiris

40.2k11 gold badges55 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Over a year ago

Thanks this worked, thanks also for the jsfiddle link it helped

Jore · Accepted Answer · 2011-02-25 16:01:39Z

3

You need to add position: relative; and set a height to the element you have overflow set to hidden on.

edited Feb 25, 2011 at 16:01

answered Feb 25, 2011 at 15:13

Jore

563 bronze badges

3 Comments

Sotiris Over a year ago

I don't think that setting only position:relative will solve the problem.

Jore Over a year ago

Yeah you're right. I noticed and was about to edit my post although you already posted including the height of the parent element. Thank you.

Chris Over a year ago

I had actually already set height (I omitted it as I didnt think it was necessary). +1 for help. Thanks.

Chris · Accepted Answer · 2011-02-25 16:27:11Z

0

if you want to hide a div, have you considered "display: none"? For example,
<div class="graph" style="display: none"/>

edited Feb 25, 2011 at 16:27

Chris

27.5k49 gold badges208 silver badges358 bronze badges

answered Feb 25, 2011 at 15:18

DwB

38.6k11 gold badges62 silver badges86 bronze badges

1 Comment

Chris Over a year ago

I usually do this but as I want to animate the graphs sliding around I cannot use display

Collectives™ on Stack Overflow

CSS overflow hidden

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related