SyntaxFix

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

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_ 
<div id="outer">_x000D_
  <div id="inner">_x000D_
    <div id="inner-inner"></div>_x000D_
  </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

Examples related to html

• Embed ruby within URL : Middleman Blog • Please help me convert this script to a simple image slider • Generating a list of pages (not posts) without the index file • Why there is this "clear" class before footer? • Is it possible to change the content HTML5 alert messages? • Getting all files in directory with ajax • DevTools failed to load SourceMap: Could not load content for chrome-extension • How to set width of mat-table column in angular? • How to open a link in new tab using angular? • ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to css

• need to add a class to an element • Using Lato fonts in my css (@font-face) • Please help me convert this script to a simple image slider • Why there is this "clear" class before footer? • How to set width of mat-table column in angular? • Center content vertically on Vuetify • bootstrap 4 file input doesn't show the file name • Bootstrap 4: responsive sidebar menu to top navbar • Stylesheet not loaded because of MIME-type • Force flex item to span full row width

Examples related to width

• How to Determine the Screen Height and Width in Flutter • Change New Google Recaptcha (v2) Width • How to get the <td> in HTML tables to fit content, and let a specific <td> fill in the rest • Full width image with fixed height • Width equal to content • CSS to make table 100% of max-width • CSS Input with width: 100% goes outside parent's bound • HTML email in outlook table width issue - content is wider than the specified table width • How to set up fixed width for <td>? • How to make div's percentage width relative to parent div and not viewport

Examples related to css-position

• How does the "position: sticky;" property work? • How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3? • CSS z-index not working (position absolute) • Relative div height • How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport? • How to position the Button exactly in CSS • How to make fixed header table inside scrollable div? • Absolute positioning ignoring padding of parent • Have a fixed position div that needs to scroll if content overflows • How to make div fixed after you scroll to that div?