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

Question

Here is the HTML I am working with    x000D   x000D   lt div id  outer  style  min-width  2000px  min-height  1000px  background   3e3e3e   gt  x000D     lt div id  inner  style  left  1   top  45px  width  50   height  auto  position  absolute  z-index  1   gt  x000D       lt div style  background   efffef  position  absolute  height  400px  right  0px  left  0px   gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   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

User · Answer

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

User · Answer

Specifying a non-static position  e g   position  absolute relative on a node means that it will be used as the reference for absolutely positioned elements within it http   jsfiddle net E5eEk 1   See https   developer mozilla org en-US docs Learn CSS CSS layout Positioning Positioning contexts     We can change the positioning context     which element the absolutely positioned element is positioned relative to  This is done by setting positioning on one of the element s ancestors     x000D   x000D   outer   x000D    min-width  2000px   x000D    min-height  1000px   x000D    background   3e3e3e   x000D    position relative x000D    x000D   x000D   inner   x000D    left  1    x000D    top  45px   x000D    width  50    x000D    height  auto   x000D    position  absolute   x000D    z-index  1  x000D    x000D   x000D   inner-inner   x000D    background   efffef  x000D    position  absolute   x000D    height  400px   x000D    right  0px   x000D    left  0px  x000D    x000D   lt div id  outer  gt  x000D     lt div id  inner  gt  x000D       lt div id  inner-inner  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

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

Examples related to html

Examples related to css

Examples related to width

Examples related to css-position