html - How to make div's percentage width relative to parent div and not viewport -
<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>
Comments
Post a Comment