Arrange two absolute divs side by side without overlapping each other

Question

Arrange two absolute divs side by side without overlapping each other

I have a specific layout configuration:

<div id="container">

   <div class="left"> 1 </div>

   <div class="left"> 1 </div>

   <div class="right"> 2 </div>

</div>

My goal is to stack the left divs on top of each other using position:absolute, which is working correctly.

In addition, I aim to position the right div to the far right by adding right:0, which is also functioning as intended.

The issue arises when the left and right divs overlap. My desired outcome is for the left div not to overlap with the content of the right div.

It is important to note that I am unable to assign a fixed width to either div.

To see this problem illustrated visually, please refer to the following jsFiddle.

Below is my current CSS setup:

#container {
    width:100%;
    position:relative;
}

.left {
  position:absolute;
  background:yellow;
}

.right {
  position:absolute;
  background:green;
  right:0;
}

html css

Answer 1

Answer №1

To achieve this layout, you have two options: using Flexbox with position: absolute, or utilizing CSS Table with the same positioning.

#container {
  width:100%;
  display: flex;
  align-items: flex-start;
}

.left-wrapper {
  position: relative;
  flex: 1;
}

.left {
  background: yellow;
  position: absolute;
  width: 100%;
}

.left:last-child {
  opacity: 0.5;
  background: lightblue;
  margin-top: 10px;
}

.right {
  background:green;
  white-space: nowrap;
}

<div id="container">
  <div class="left-wrapper">
     <div class="left"> Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </div>
     <div class="left">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div> 
  </div>
  <div class="right">Don't overlap please</div>
</div>

Alternatively, you can opt for CSS Table combined with position: absolute:

#container {
  display: table;
}

.left-wrapper {
  display: table-cell;
  position: relative;
  vertical-align: top;
  width: 100%;
}

.left {
  background: yellow;
  position: absolute;
  width: 100%;
}

.left:last-child {
  margin-top: 10px;
  opacity: 0.5;
  background: lightblue;
}

.right {
  background: green;
  display: table-cell;
  vertical-align: top;
  white-space: nowrap;
}

<div id="container">
  <div class="left-wrapper">
     <div class="left"> Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </div>
     <div class="left">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div> 
  </div>
  <div class="right">Don't overlap please</div>
</div>

Answer 2

To achieve this layout, you have two options: using Flexbox with position: absolute, or utilizing CSS Table with the same positioning.

#container {
  width:100%;
  display: flex;
  align-items: flex-start;
}

.left-wrapper {
  position: relative;
  flex: 1;
}

.left {
  background: yellow;
  position: absolute;
  width: 100%;
}

.left:last-child {
  opacity: 0.5;
  background: lightblue;
  margin-top: 10px;
}

.right {
  background:green;
  white-space: nowrap;
}

<div id="container">
  <div class="left-wrapper">
     <div class="left"> Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </div>
     <div class="left">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div> 
  </div>
  <div class="right">Don't overlap please</div>
</div>

Alternatively, you can opt for CSS Table combined with position: absolute:

#container {
  display: table;
}

.left-wrapper {
  display: table-cell;
  position: relative;
  vertical-align: top;
  width: 100%;
}

.left {
  background: yellow;
  position: absolute;
  width: 100%;
}

.left:last-child {
  margin-top: 10px;
  opacity: 0.5;
  background: lightblue;
}

.right {
  background: green;
  display: table-cell;
  vertical-align: top;
  white-space: nowrap;
}

<div id="container">
  <div class="left-wrapper">
     <div class="left"> Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </div>
     <div class="left">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div> 
  </div>
  <div class="right">Don't overlap please</div>
</div>

Arrange two absolute divs side by side without overlapping each other

Answer №1

Similar questions

Guide to removing selected value from a combobox in Angular

Guide on applying CSS to option tag within a select element in VUE.js

Encountering difficulties while using JavaScript to complete a form due to issues with loading the DOM

Align pictures in the middle of two divisions within a segment

Issue: TypeError: Unable to access the 'getBoundingClientRect' property of an undefined value

Symbol '%' is not supported in Internet Explorer

"Creating a custom navigation bar with full width and navigation corners on both left

The script ceased functioning immediately following the inclusion of a case-insensitive search feature and interactive images

Using rowspan to display JSON data in AngularJS

Using props as classnames in next.js applications

Having issues with Tailwind classes not being applied properly on dynamically generated pages in Gatsby-node

Scrapy and Python data gets corrupted by <br> tags causing issues

How can I modify the appearance of the bootstrap scrollbar with scrollspy?

The Google map is not showing up on the screen despite having entered the API Key

Using the window.history.pushState function triggers a page reload every time it is activated

Capture line breaks from textarea in a JavaScript variable with the use of PHP

The code is slicing data, but the changes are not reflecting in the user interface

A guide to displaying dropdown values above a modal

Using npm webpack-mix to execute a JavaScript function stored in a separate file

Struggling to center an image within a CSS border