CODEWITHSUNDEEP
csscss-position
Warwick
Warwick

Reputation: 1

CSS: absolute DIV inside another absolute DIV

I have the following:

<style type="text/css">
    div.container
    {
        width: 100px;
        height: 300px;
        border: solid 1px #CCCCCC;

        position: absolute;
        top: 20px; /* Will change depending on where the box is opened */
        left: 20px; /* Same */

        overflow: hidden;
    }

    div.block
    { /* Will exceed 300px in height */
        width: 100px;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>

[...]

<div class="container">
    <div class="block">
        <!-- hyperlinks -->
    </div>
</div>

I'm trying to create something that imitates scrolling - a box that moves around within a box. IE does this beautifully; the 'block' div is perfectly hidden within the 'container' div. Every other browser throws the 'block' div at the top of the page, above the 'container' div and positioning relative to the page.

How do I get everyone else to behave like IE does?

Upvotes: 0

Views: 2831

Answers (1)

peterp
peterp

Reputation: 3165

Your first div should have a fixed width and height, with the CSS property overflow: auto;. Anything inside of this div that's larger than it will cause the parent div to display scrollbars.

You're then free to set it to position to absolute, and place it anywhere you like.

Demo: http://jsfiddle.net/duc44/

Upvotes: 1

Related Questions