CODEWITHSUNDEEP
htmlcss
Henrik Petterson
Henrik Petterson

Reputation: 7104

Position two absolute divs next to each other without overlaping

I have this setup: 

<div id="container">

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

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

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

</div>

I want to position the left divs behind each other by using position:absolute. Works fine.

And I want to position the right div to the right by adding right:0. Works fine.

Problem is that the left and right div overlap each other. I don't want this. I want the left div to not overlap the content of the right div.

I cannot set a fixed width to either divs.

Please see this jsFiddle for a demonstration of the issue.

Here is my CSS:

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

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

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

Upvotes: 2

Views: 4584

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122135

You can do this with Flexbox and position: absolute.

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

Or CSS Table and 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>

Upvotes: 3

Related Questions