CODEWITHSUNDEEP
csshtmlabsoluteoverlap
redcrow
redcrow

Reputation: 1823

How to avoid overlapping between two divs positioning absolute inside a div positioning relative?

The following code works if the page has enough space to host all divs, but if I resize at minimum the page the two divs positioning absolute overlap. How can I avoid that?

#div-chatroom {
  position: relative;
  height: calc(100% - 70px);
  /* IE9+ and future browsers */
  height: -moz-calc(100% - 70px);
  /* Firefox */
  height: -webkit-calc(100% - 70px);
  /* Chrome, Safari */
  padding: 0;
  text-align: center;
  margin: 0;
  border-right: 2px solid #333333;
  overflow: auto;
}

#div-messages {
  position: absolute;
  top: 10px;
  bottom: 110px;
  left: 10px;
  right: 10px;
  min-height: 200px;
  overflow: auto;
}

#div-sending {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  height: 100px;
}
<div id="div-chatroom">
  <div id="div-messages">messages here</div>
  <div id="div-sending">sending tools here</div>
</div>

UPDATE #1
As required the code on JSFiddle (but if the two divs have position: absolute it doesn't seem to work).

Upvotes: 8

Views: 19558

Answers (2)

redcrow
redcrow

Reputation: 1823

Ok, I got an equivalent result by changing approach.

CSS (JSFiddle):

#div-chatroom {
    position: relative;
    height: calc(100% - 70px); /* IE9+ and future browsers */
    height: -moz-calc(100% - 70px); /* Firefox */
    height: -webkit-calc(100% - 70px); /* Chrome, Safari */
    padding: 0;
    text-align: center;
    margin: 0;
    border-right: 2px solid #333333;
    background-color: #ffffff;
    overflow: auto;
}

#div-messages {
    position: relative;
    margin: 0;
    padding: 0;    
    min-height: 200px;
    height: calc(100% - 100px); /* IE9+ and future browsers */
    height: -moz-calc(100% - 100px); /* Firefox */
    height: -webkit-calc(100% - 100px); /* Chrome, Safari */
    background-color: green;
    overflow: auto;
}

#div-sending {
    position: relative;
    margin: 0;
    padding: 0;    
    height: 100px;
    background-color: red;
}

Upvotes: 2

LorDex
LorDex

Reputation: 2636

the whole purpose of position:absolute is for element to not be dependend or any other elemends on the page (except for it's parent) co you can't actually achieve this. if you want to aligh them accordingly, you can do this using position style other than absolute. post your code to jsfiddle, then we will be able to provide good solution.

Upvotes: 0

Related Questions