Question

I have two html divs to separate sections of the webpage’s masterpage. Their positioning are both relative. Div 1 contains a content placeholder and the contents height may vary. Div 2 is used the footer and only contains one label which is the only content in the footer. The label’s positioning is relative.

My problem is sometimes the contents of Div 2 (inside the contentplaceholder within the masterpage) is too long therefore overlaps the location of where I set my footer(the label). The content is primarily a varying sized table.

How can I set Div 2’s location to automatically adjust to the size of Div 1 to prevent overlapping?

The content of Div 1’s content placeholder is an aspx page with dynamically created tables so dont deletet the asp.net tag.

Answer 1

Add and Edit the following to the existing one and change the class names as per your Div’s.

 .Div1 {
      overflow: auto;
    }

.Div2 {
  clear: both; /* remove position: relative; */

I don’t know about your css, so I am just guessing these all causing the problem and if its not try to add margin on your div 1 to prevent overlapping, and adding float too.