Question

So,

<div id="page-wrap">
  <div id="main-content>
    <div id="main-content-inner">
    </div>
  </div>
</div>

main-content has a relative positioning, page-wrap has default positioning, main-content-inner has absolute positioning.

The problem is page-wrap height is not expanding to the height of main-content-inner. main-content-inner displays just fine, but it is displaying outside the bounds of page-wrap. So if i set overflow to hidden on page wrap my main-content-inner gets cut off. How do I make it so my page-wrap height expands to the tallest height of its children containers?

#page-wrap {
width:100%;
min-height:100%;
height:auto;
height:100%;
margin-bottom:-20px;
overflow:hidden;

}

#main-content {
width: 100%;

margin-left: -295px;
position:relative;

}
#main-content-inner {
left: 560px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
position:absolute;
top:100px;
min-width:60%;
max-width:60%;


}

Answer 1

If you’re using the min-height property, then why are you using the height property right after it. When you set height: 100%, I believe you’re restricting #page-wrap height to exactly 100%. Try deleting the height definitions and see if that fixes the problem.