Here is the HTML I am working with.
<div id="outer" style="min-width: 2000px; min-height: 1000px; background: #3e3e3e;">_x000D_
<div id="inner" style="left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1;">_x000D_
<div style="background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px;"></div>_x000D_
</div>_x000D_
</div>
_x000D_
What I would like to happen is for the inner div to occupy 50% of the space given to its parent div(outer). Instead, is is getting 50% of the space available to the viewport, which means that as the browser/viewport shrinks in size, so does it.
Given that the outer div has min-width
of 2000px
, I would expect the inner div to be at least 1000px
wide.
This question is related to
html
css
width
css-position
Use position: relative on the parent element.
Also note that had you not added any position attributes to any of the divs you wouldn't have seen this behavior. Juan explains further.
Source: Stackoverflow.com