I have a code snippet that works perfectly when there is enough space to display all the divs without overlapping. However, when I resize the page to its minimum, the two absolute positioned divs start to overlap. Is there a way to prevent this from happening?
#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
I've added the code to JSFiddle. Despite trying different solutions, it seems like the issue persists if both divs are set with position: absolute.