getting something outside a div

Question

Well I'm not sure how to ask this with words so I will post an image:

So in the image, there is a main div, lets call it "red".

Inside "red" there is another div called: "green"

Inside "green" there is an ul, with some li elements, they are supposed to have an underline, but that underline must get out of the div, so the problem I have, is getting that line outside of "green", when in the code, it is inside.

I'm guessing there might be some kind of overflow setting or some technique to achieve this, maybe its much easier than I think, but I just can't figure it out.

The sum it up, I need to get something from within a div, and get it to show outside of it as well.

I tried to google it as much as I could but I couldn't find anything that worked for me, maybe because I'm not even sure how to ask.

Answer 1

That depends on situation. If it is fixed size elements and they are always same size no matter what you could do it: Position red div as relative, then green div as absolute and ul again as absolute. That will allow you move elements. Relatively to red div. If it is stretching elements depending on size of window, it is harder and margin-left, margin-top and float:left would do the trick, but you should be very careful with it as it is hard to make cross-browser.

Answer 2

You cannot solve this with overflow. What you need to do is to let the ul inside green be set to position: absolute and the red box to position: relative.

I made a jsfiddle for it (my first).