Position absolute and overflow hidden

html css layout overflow css-position
Zardoz picture Zardoz · Jan 5, 2011 · Viewed 160.9k times · Source

We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV (example).

Is there any chance to make the inner DIV obey the overflow hidden of the outer DIV without setting the outer DIV to position absolute (cause that will muck up our complete layout)? Also position relative for our inner DIV isn't an option as we need to "grow out" of a table TD (exmple).

Are there any other options?

Answer

shankhan picture shankhan · Jan 5, 2011

Make outer <div> to position: relative and inner <div> to position: absolute. It should work for you.

Related questions

CSS - Expand float child DIV height to parent's height

I have the page structure as: <div class="parent"> <div class="child-left floatLeft"> </div> <div class="child-right floatLeft"> </div> </div> Now, the child-left DIV will have more content, …

Read More
What is a clearfix?

Recently I was looking through some website's code, and saw that every <div> had a class clearfix. After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix? Could you …

Read More
Fixed Table Cell Width

A lot of people still use tables to layout controls, data etc. - one example of this is the popular jqGrid. However, there is some magic happening that I cant seem to fathom (its tables for crying out loud, how …

Read More