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

by

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.

#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>

More Related Contents:

  1. How to center a “position: absolute” element
  2. How can I make a div not larger than its contents?
  3. How to make an element width: 100% minus padding?
  4. ‘transform3d’ not working with position: fixed children
  5. How to make a div fill a remaining horizontal space?
  6. Why aren’t my absolutely/fixed-positioned elements located where I expect?
  7. How does the “position: sticky;” property work?
  8. Why does position:relative; appear to change the z-index?
  9. Why do absolute elements stack up on each other instead of stacking one after the other?
  10. Absolute position is not working
  11. Position: sticky buttons not working in IE 11
  12. ‘position: sticky’ not working when ‘height’ is defined
  13. Center aligning a fixed position div
  14. Position absolute and overflow hidden
  15. Absolute positioning inside absolute position
  16. Why is an element with position: fixed moving with a non-positioned sibling?
  17. Div width 100% minus fixed amount of pixels
  18. Width 100% with white borders around it. WHy?
  19. Make an image width 100% of parent div, but not bigger than its own width
  20. Why isn’t my margin working with position: fixed?
  21. resizes wrong; appears to have unremovable `min-width: min-content`
  22. Why doesn’t width/height work with non positioned pseudo elements?
  23. Position fixed doesn’t work when using -webkit-transform
  24. body { overflow-x: hidden; } breaks position: sticky
  25. Why using absolute position causes the div to be on top?
  26. sticky position on css grid items
  27. How do browsers calculate width when child depends on parent, and parent’s depends on child’s
  28. How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?
  29. Word wrap a link so it doesn’t overflow its parent div width [duplicate]
  30. How to work with ellipsis in bootstrap responsive table

Leave a Comment