html - How to make div's percentage width relative to parent div and not viewport -

here html working with.

<div id="outer" style="min-width: 2000px; min-height: 1000px; background: #3e3e3e;">    <div id="inner" style="left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1;">      <div style="background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px;"></div>    </div>  </div>

what happen inner div occupy 50% of space given parent div(outer). instead, is getting 50% of space available viewport, means browser/viewport shrinks in size, it.

given outer div has min-width of 2000px, expect inner div @ least 1000px wide.

specifying non-static position, e.g., position: absolute/relative on node means used reference absolutely positioned elements within http://jsfiddle.net/e5eek/1/

#outer {    min-width: 2000px;     min-height: 1000px;     background: #3e3e3e;     position:relative  }    #inner {    left: 1%;     top: 45px;     width: 50%;     height: auto;     position: absolute;     z-index: 1;  }    #inner-inner {    background: #efffef;    position: absolute;     height: 400px;     right: 0px;     left: 0px;  }

<div id="outer">    <div id="inner">      <div id="inner-inner"></div>    </div>  </div>