CODEWITHSUNDEEP
htmlcsscss-float
bb89
bb89

Reputation: 803

Setting overflow:hidden on parent hides all content

I'm trying to set up a site that has a "carousel" of divs that are all side-by-side (floated left) each with a full-screen width. Using javascript i plan to move different divs into view by moving the "carousel."

My problem is that for some reason when I set overflow:hidden on the div that contains the carousel all the content is hidden. When I inspect with firebug the divs show up in the correct places but none of the content is visible.

Here is the HTML:

<div id="content_window">
    <div id="carousel">
        <div id="p_home" class="pane">
            Home!
        </div>
        <div id="p_about" class="pane">
            About!
        </div>
        <div id="p_services" class="pane">
            Services!
        </div>
        <div id="p_contact" class="pane">
            Contact!
        </div>
    </div>
</div>

And the CSS:

#content_window
{
    position:relative;
width:100%;
overflow:hidden;
}

#carousel
{
    position:absolute;
    width:400%;
    top:50px;
    left:0;
    overflow:hidden;
}

.pane
{
    float:left;
    width:25%;
    color:White;
    text-align:left;
    margin-top:50px;
}

If I take the overflow:hidden off of #content_window then the content in the panes becomes visible but horizontal scrollbars are added and you can scroll across and see all the panes. Does anyone know what I'm doing wrong?

Upvotes: 6

Views: 7075

Answers (2)

Salman Arshad
Salman Arshad

Reputation: 272166

When a div contains nothing except floated or positioned elements, its height becomes 0. That is the problem with div#content_window. Try adding a height to that div:

#content_window
{
height: 120px;
}

Upvotes: 10

Ben Lee
Ben Lee

Reputation: 53329

There's no need to use absolute positioning at all. Just have the content_window clip the viewport for the carousel. See http://jsbin.com/uhubij/edit#html.

The CSS is much simpler:

#content_window {
    width:100%;
    overflow:hidden;
}

#carousel {
    width:400%;
}

.pane {
    float:left;
    width:25%;
    text-align:left;
    margin-top:50px;
}

To switch between the panes, add a margin-left to #carousel. The first pane is at margin-left: 0% (default). The second pane is at margin-left: -100%;. The third pane is at margin-left: -200%;, etc... For example, here is pane 2: http://jsbin.com/uhubij/2/edit#html

The HTML is basically the same (except I added a clearing div for you):

<div id="content_window">
    <div id="carousel">
        <div id="p_home" class="pane">
            Home!
        </div>
        <div id="p_about" class="pane">
            About!
        </div>
        <div id="p_services" class="pane">
            Services!
        </div>
        <div id="p_contact" class="pane">
            Contact!
        </div>
        <div style="clear: both;"></div>
    </div>
</div>

Upvotes: 0

Related Questions