Encountering an issue with a div element on a webpage. When resizing the browser page in Chrome, the div overlaps other elements and part of it is hidden. However, in IE, the height:auto property behaves as expected without any overlapping. I have attempted the following solutions:
height: auto *results in div overlap below
height: 510px *does not resize the div as desired
<div class=parent>
<div class=child1>
overlapping
</div>
<div class=child2>
being overlapped
</div>
</div>
The issue is more complex than this simplified example. This involves the MicroStrategy BI application with extensive JavaScript (js) and cascading style sheets (css) impacting the page. My goal is to make alterations to these pages. I have included a jsfiddle link that closely replicates the issue, though simplifying it further was challenging due to its complexity.
As evident from the provided jsfiddle link, the div with ID "List" overlaps the div below it. This behavior only occurs in Chrome and Firefox, not in IE.
In summary, I need to prevent the div with ID "list" from overlapping the div below it.