Is it possible to have below layout without using position absolute

css position: absolute
position: absolute not working
position: absolute outside of parent
relative parent absolute child height
div on top of another div without absolute positioning
position: fixed relative to parent
position absolute z-index
z-index not working

I want to avoid any change in HTML as that may cause regression on other layouts and designs. As we are using same template across all design and layouts.

Need to achieve below layout without using position absolute for .content2. And content2 and content3 should have equal height.

.wrapper {
  display: flex;
}

.content {
  background: red;
}

.content2 {
  background: green;
}

.content3 {
  background: yellow;
}

.newLayout {
  position: relative;
}

.newLayout .content2 {
  position: absolute;
  right: 0;
  width: 92px;
  padding: 2px 10px;
}

.newLayout .content3 {
  white-space: nowrap;
  margin-top: 20px;
  padding: 10px;
}
<div class="wrapper newLayout">
  <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentia</div>
  <div class="content2">Content Two</div>
  <div class="content3">Content Three</div>
</div>

With flexbox you'd need to have nested flexboxes to have this layout. A 2D layout like this would be an ideal case for CSS grids - see demo below:

.wrapper {
  display: grid;
  grid-template-areas: "one two" "one three";    
}

.content {
  background: red;
  grid-area: one;
}

.content2 {
  grid-area: two;
  background: green;
}

.content3 {
  grid-area: three;
  background: yellow;
}
<div class="wrapper">
  <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentia</div>
  <div class="content2">Content Two</div>
  <div class="content3">Content Three</div>
</div>

How to understand CSS Position Absolute once and for all, To be able to position itself, it has to know which parent div it's going to position itself relative to. The code below shows four nested divs. .box-1 to .box-3 are centered auto only. .box-4 doesn't have margin set, and it sits in its default position in the document flow. .box-4 position absolute without offset. Absolute Position Within the Grid It might take some getting used to, but in addition to the normal offsets you can also position a grid item using the grid-placement properties. For example, let’s place our item-2 absolutely on grid-area: 3 / 2; (in other words, starting on the third row line down, and the second column line across).

Try this fiddle Fiddle here

.wrapper {
display: flex;
}
.leftBox{
background:red
}
.leftBox, .rightBox{display:flex;flex-flow:column;}
.contentTwo, .contentThree{height:50%}
.contentTwo{background:green;}
.contentThree{background:yellow;}

Advanced layouts with absolute and fixed positioning � WebPlatform , Elements with fixed positioning differ from this slightly—they always have the If you've reached the html element without finding a positioned ancestor, then Copy the code below into your text editor and save the document as absolute. html. <! This probably isn't something you will encounter in your normal design work� Doing Without a Layout Manager (Absolute Positioning) Although it is possible to do without a layout manager, you should use a layout manager if at all possible. A layout manager makes it easier to adjust to look-and-feel-dependent component appearances, to different font sizes, to a container's changing size, and to different locales.

.wrapper {
  display: grid;
  grid-template-columns: 1fr, 92px;
  grid-template-rows: 1fr, 1fr;
}

.content {
  grid-area: 1/1/3/2;
  background: red;
}

.content2 {
  grid-area: 1/2/2/3;
  background: green;
}

.content3 {
  grid-area: 2/2/3/3;
  background: yellow;
}
<div class="wrapper">
  <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentia</div>
  <div class="content2">Content Two</div>
  <div class="content3">Content Three</div>
</div>

Faux Absolute Positioning – A List Apart, There are two popular approaches to positioning with CSS: float and absolute below), and; it lets us play with position: overflow (without breaking the grid!) If you have a two-column fixed-width design, this may not be your technique of� We do this by adding position: relative to that element. Next, we need to absolutely position the inner element. We do this by setting position: absolute. Lastly, we tell the browser where exactly we want the inner element to be placed in relation to the outer element. This is done using four possible properties: top, right, bottom, and left

Stacking without the z-index property, When the z-index property is not specified on any element, elements are stacked in In the example below, elements #1 through #4 are positioned elements. < div id="abs1" class="absolute"> <b>DIV #1</b><br />position: absolute Get the latest and greatest from MDN delivered straight to your inbox. It is even possible to use faux absolute positioning recursively, e.g., use a positioned item as the container for new lines and items. Downsides #section5 Faux absolute positioning is very much inspired by and intended for grid-based design and is more rewarding with more complex layouts.

CSS Positioning - MDN Web Docs, The position CSS property sets how an element is positioned in a document. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static . ( Note that there are browser inconsistencies with perspective and filter� img {position: absolute; top: 46px; right: 80px; } You just add in which method of positioning you’re using at the start, and then push the image out from the sides it’s going to be closest to. You can add the CSS directly into the tag using the style attribute (as shown in the introduction to stylesheets ), or you can use classes and ids

Positioning Elements on the Web, Positioning layouts in CSS was once a very daunting task, and hacks like using tables There are a lot of properties and functions to learn in order to below, if the first element in the body is header, it will get a row height of 100px) Absolute positioning should not be used to lay out columns of content. The position of the picture environment is defined by the position of the header and/or the page layout. So the second set of parameters should depend on any or multiple of the page margins. When the page changes the margins will change and my origin will stay the same.

Comments
  • Perfect. Thanks ... Is it possible to do using display: flex?
  • you'd need to have nested flexboxes then :)
  • You have changed markup. I want to avoid that. display: grid is better option.