how to make a ul 's elements go outside a div with overflow set to hidden

Question

I have a div with some content in it which includes a ul with a list of names the div tag has overflow set to hidden and height :auto so that it increases in height with the content .However i have a ul with a list of names and i want the list to go outside the box . something like the facebook add people autocomplete . The people list shows outside the box

heres my syntax

   <div>

    <!-- content goes here -->

    <ul><!-- names go here --> </ul>


    </div>

updated

<div><!-- div with overflow set to hidden-->

<ul class="selected"></ul><!-- ul containing selected elements-->

<ul class="users"></ul> <!-- list of users -->


</div>

div{overflow:hidden}

.selected{overflow:hidden}

.users{position:absolute}

I need the users div to go outside the box but because the parent div is set to overflow hidden it gets cut off. I cannot remove the overflow hidden because as the div with class selected gets more elements the parent div wont expand

Answer 1

No. You simply cannot.

jsBin demo shows that you cannot 'push-out' from an overflow:hidden element an inner children. The answer would be: don't use overflow:hidden; .

Or: you might want to check THIS answer

Answer 2

Try adding position: relative to ul.

Demo: http://jsfiddle.net/57NmY/

Answer 3

It can be done, if you position the child element absolutely. -> http://jsfiddle.net/joplomacedo/CX5n9/