Positioning Elements in Tableless Layout

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.slide开发者_运维问答r-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?

---

add position:relative to div.container

---

@locrizak's answer is correct, I needed to add 'position:relative' to the div.container, but I needed to add it to the div.did-you-know as well. In other words, I needed to set all of the containing div's to position:relative in order for the elements in question to be positioned relative to the immediate parent.

I found this was also answered in the MDN page for css position under the 'absolute' definition:

[The browser will] position [the element] at a specified position relative to its closest positioned ancestor or to the containing block

However the W3C reference was not as helpful.