Question

I am trying to do a tableless
layout, and I have the following
HTML snippet:

<div class="slider-inner">
    <div class="slider-pane">
        <div class="container">
            <p>...</p>
            <div class="did-you-knoow">
                <div class="facts">
                </div>
                <div class="marquee-container">
                </div>
            </div>
        </div>
    </div>
</div>

Which is styled w/ this CSS:

div.slider-pane {
    width: 1024px;
}

div.container {
    display: block;
}

div.facts {
    margin-right: 60%;
}

div.marquee-container {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 10px;
    width: 60%;
}

I want the div.facts to occupy the left-40% , and the div.marquee-container
to occupy the right-60% of the div.did-you-know (their immediate parent). I
expect the div.marquee-container to be positioned relative to its parent, and
its width to be 60% of its parent, but its positioning and width are relative
to div.slider-inner, which is 2 levels above its parent.

How do I set the position and width of div.marquee-container relative to
its parent, and not the div three levels above it?

Answer 1

add position:relative to div.container