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

Step-by-step guide on displaying a window containing text when hovering over a CSS class

Position the table footer on the right side of the page

Update the content of a text area with AJAX requests

Collapsible Rows in Material-UI Table seamlessly integrated with regular rows

A guide on transforming a JSON object representing an HTML element into a live HTML element for display on a webpage using C#, JavaScript, or jQuery

The inline display property does not function properly with the <li> element

Bringing in typefaces to enhance your email signature

What are some ways to utilize CSS variables for enhancing component styles within Svelte?

Java Chatclient with a User-Friendly HTML Interface

Pass a variable between popup.js and background.js in a Chrome Extension

JavaScript toggle display function not functioning properly when clicked

What methods are available to stop Internet Explorer from caching HTML content without resorting to utilizing arbitrary query parameters?

Incorrect posture during the movements

Unable to display the retrieved list data using v-for loop from axios get request

Maintaining aspect ratio of canvas while ensuring responsiveness

What is the process for triggering an unordered list when I click on a table data cell within the Hospitals category?

Ensure the header remains fixed when scrolling in an HTML page with Bootstrap

The impact of CSS on AJAX controls

Outlook issue with table sizing

Troubleshooting problem with CSS scaling on smartphones