Hey Joe -
I've asked this question on stack overflow, but that place is always hit or miss. I don't know how much you mess with CSS, but I thought it was worth a try.
"Getting an absolutely positioned element to rejoin the page flow, and be part of div height:auto; calculation."
I am attempting to use a jquery drilldown menu plugin that hides it's child elements by absolute positioning them to the right, and then hiding the overflow.
When the user clicks a link, the jquery pulls the item back into view by adjusting it's right and top css elements.
The plugin itself was crafted to set a fixed height for the parent UL, and that height does not change. This is problematic for me, as I have content below the menu that I wish to move up to fill the blank space as the menu shortens.
I set the parent UL to `height:auto !important;` to override the static height set by the jquery. This shows the parent elements of the menu fine, but when I select an item, and the menu drills down to the next level, the child elements are not shown due to the fact that they have `position:absolute;` on them. This class takes them out of the normal flow browser height calculation, and causes them to be hidden.
So there's my dilemma, as far as I can tell, I have to have the child elements set to `position:absolute;` for them to move correctly within the plugin, but this class also causes height:auto; to not work, as the absolute items are taken out of the browser flow.
Can anyone think of the correct way to position these elements so that I can use `height:auto;`?
Thanks - Alex
< div class="wrapper">
< ul class="parent-ul">
< li>< a href="#">Item1< /a>
< ul class="sub-ul">
< li>
SubItem1< /a>< /li>
< li>SubItem2< /a>< /li>
< /ul>
< /li>
< li>< a href="#">Item1< /a>< /li>
< /ul>
< /div>
.wrapper {
overflow-x:hidden;
position: relative;
}
ul.parent-ul{
height:auto !important;
position: relative;
}
ul.sub-ul{
margin: 0; position: absolute; top: 0; right: 0;
}