CODEWITHSUNDEEP
htmlcsspositionwidth
F21
F21

Reputation: 33391

Making parent container stretch to width absolutely positioned child and vice versa

I am working with some markup for a drop down menu.

The markup is as follows:

<div class="select">
    <a href="#" class="anchor menu-active">
        <label>val1</label><span class="arrow"><label></label></span>
    </a>

    <div class="container menu-visible">
        <ul>
            <li>
                <a value="val1" class="item-selected">val1</a>
            </li>
            <li>
                <a value="val2333333333">val2333333333</a>
            </li>
        </ul>
    </div>
</div>

The first a represents the menu item and the container div represents a list of submenu items.

What needs I need to do: Both the width of the container and the anchor must be the same. It is possible that the submenu can be wider than the anchor or vice-versa. In addition, the width should not be artificially restricted and should be allowed to expand with the wider content, whether it is the anchor or the container.

Here's the CSS I have been playing with, but can't seem to get the anchor to expand to fit the container at all:

.container{
    position: absolute;
}

.anchor{
    font-weight: bold;
}

li{
    background: blue;
}

ul{
    display: inline-block;
}

.select{
    background: red;
    display: inline-block;
}

And the fiddle: http://jsfiddle.net/MxdQS/

I wish to do this with CSS only, where possible, so no javascript solutions please :)

And a diagram to better demonstrate what I am talking about: enter image description here

Some clarification: If I have 2 containers of different widths and 1 is positioned absolutely, how can I match them up together so that the shorter container will always expand to the width of the longer container?

Could anyone advice as to how this can be done?

Upvotes: 3

Views: 902

Answers (1)

Kamal
Kamal

Reputation: 2180

Check DEMO HERE

CSS

.container{
    position: absolute;
    width:150px;
}

.anchor{
    font-weight: bold;
}
ul{
    margin:0;
    padding:0;
}

li{
    background: blue;
    list-style:none;
    margin:0;
    padding:0l
}



.select{
    background: red;
    display: inline-block;
    width:150px;
}

UPDATE

check updated DEMO

Upvotes: 1

Related Questions