CSS overflow hidden

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>

F开发者_开发知识库or 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?

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/

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

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