My main wrapper div contains a content div and a button. However, I'm facing an issue where the button is overlapping with the content div instead of appearing below it.
The content div is styled with the following CSS:
#groupMembers {
position: absolute;
height: 50%;
width: 90%;
left: 5%;
overflow: scroll;
display: inline-block;
}
and the button has the following CSS:
button {
display: inline-block;
width: 70%;
left: 15%;
}
I initially believed that since both elements are inline-block, they shouldn't overlap. However, despite my efforts, they still do. You can view the issue in this JsFiddle demo: http://jsfiddle.net/b5hp6boz/
Can anyone provide guidance on how to make sure the button appears beneath the content div?