Is it there anyway to make a div within a div 'breakout' of the parent div without specifying widths of child, just childs elements

Question

ie I have a div, below is a hidden div, which is wider than the div above. I want to specify the div inside to have elements with greater widths than the div above. these elements right hand side is aligned to the right hand side of the div above, but since it is wider, want the left hand side to break out. The div below is on a diff layer than the div above as it only appears on clicking on trigger element of div above.

Basically its a drop down list, with some random elements are wider than the image element above which, when clicked drops this list. but i want the list underneath to expand to the left breaking out of the parent div, without specifying exact positions. Therefore, the elements are all children of the parent div and right aligned to it, just like parent.

Hmmm, hope you can follow. Really appreciate any help. Thanks in advance.

Answer 1

You should probably just use a select tag (for accessibility's sake) even though it won't look as fancy. But if you're set on it, try something like this (and add your javascript code to hide/show the list):

#wrapper {
    width: 500px;
}
#select {
    border: 1px solid black;
    width: 180px;
    float: right;
}
#options {
    float: right;
    clear: right;
    text-align: right;
}

and

<div id="wrapper">
    <div id="select">pick one...</div>
    <div id="options">
        <div class="option">I'm short</div>
        <div class="option">I'm a very very very very very long option</div>
    </div>
</div>

If you end up using this, change the options div to a ul tag and the option divs to li tags, or something semantically closer to what you're building. I just used divs to cut down on the amount of css in my example.

Answer 2

Negative Margins seems to be the best answer. If anyone knows of cross browser issues, please post here. Perhaps I will but shalln't be testing for them for a week or two.