Overflowing Div in Absolute Div

[Booyaka]

Hello everyone!

I have a small problem which I would like some help with. I have a few absolute positioned divs with static width and height (300px) and would like them to contain amongst other a header, a non-static div (or any other suiting structure apart from iframe) with a long list (ul/li) and a footer. The problem I get is when the list is too long for the "container-div" it pushes all objects below out of the div-area.

------------------------------------------
||                  Header                        
------------------------------------------
||                                                     
||                  Inner-DIV                       
||                                                      
||        Overflow-scroll on this only     
------------------------------------------
||                  Footer                            
------------------------------------------- 

- If I set "overflow: auto" or "overflow: scroll" to the "container-div" it won't push the objects outside of the box but put them at the bottom of the scroll which I don't want to happend.

- If I set "overflow: auto" or "overflow: scroll" to the "inner-div" it still pushes the objects outside of the box (shouldn't the list overflow the inner-div? I guess it doesn't since it has no static height).

[jscheuer1]

This isn't very clear to me but, I can tell you a few things that may help. The overflow property tells the browser what to do with the content of an element that won't fit inside it. Using auto is usually meaningless except for situations where you want scrolling in only one dimension. Scroll will give you scroll bars in both dimensions whether needed or not. There are other choices. The two most relevant being 'hidden' and 'visible'. Unfortunately, once you make a container's position absolute or relative, often (but not always) these two will not work as expected, that aside for the moment, it sounds like you want overflow:visible for one or more of the divisions, this allows the content to be seen outside of the element's content area. That is as long as there is no other containing element around the overflow:visible element that confines it.

You may in fact be over styling things. The effect you want may be able to be achieved with a single division with no position property set and its overflow set to visible.