CSS position absolute only within container div

Question

I have created the following jsfiddle to illustrate my problem: http://jsfiddle.net/wGFbc/

I have a set of dl's contained within a div. They display almost like a set of tabs, but structurally they are dl's - (i have no way of changing this unfortunately).

<div id="container">
    <dl>
        <dt>
            Color
        </dt>
        <dd>
            <ol>
                <li>
                    <a href="#" title="Blue">Blue</a>
                </li>
                <li>
                    <a href="#" title="Red">Red</a>
                </li>
                 <li>
                    <a href="#" title="Green">Green</a>
                </li>
            </ol>
        </dd>
    </dl>
    <dl>
        <dt>
            Price
        </dt>
         <dd>
            <ol>
                <li>
                    <a href="#" title="100">100</a>
                </li>
                <li>
                    <a href="#" title="200">200</a>
                </li>
            </ol>
        </dd>
    </dl>
</div>

Each dl > dd to be positioned absolutely to the left so the content is always flush with the left of the container and not flush with the left of the dl (which are arranged horizontally like tabs).

The dd content is hidden by default and each becomes visible upon clicking the dt - like tabs.

The complication is that because the dd is position absolutely it spills out of the container and doesnt change the position of elements that come below it. Is there some css trick i can use here to get the effect i want without changing the markup?

I think that you cannot do it with just css since you have `position: absolute` and that makes the container not able of getting information about the child elements height. Can you use jQuery for this? If yes, check this answer http://stackoverflow.com/questions/7321281/css-position-absolute-container-height-problem — Vassilis Barzokas, May 18 '13 at 11:17

score 0 · Answer 1 · answered May 18 '13 at 11:18

0

You could with javascript/jquery get the height of the dls. Then you save the value of dl that has the heighest height and set the height on the #container div.

You would have to run this function each time the dl changes. Hope I udnerstood the question correctly.

answered May 18 '13 at 11:18

Andreas

2,336
2
28
45

Yes you have understood it definitely. I was hoping for a css solution though, which i am almost certain isnt possible but thought i would pose the question – Marty Wallace May 18 '13 at 11:20
Yeah I think it's difficult with just CSS, can't come upp with any solution actually just using CSS. Sorry. – Andreas May 18 '13 at 12:24

score -1 · Answer 2 · answered May 18 '13 at 11:22

-1

Try adding:

dl {
    float: left;
    margin-right: 10px;
    position: relative; /* this */
}

Is this what you wanted? http://jsfiddle.net/wGFbc/2/

answered May 18 '13 at 11:22

Ayman Safadi

11,502
1
27
41

No unfortunately because this will left align the dd with the dd. The dd needs to be left aligned with the parent container div – Marty Wallace May 18 '13 at 11:26

CSS position absolute only within container div

2 Answers2