Footer Issue in IE 11

Question

I have an issue in mozilla and IE 11, the content inside Div are shown below footer, check the screenshot, i have shared the code for that div and Footer. The Div is wrapped inside a section and their is single row in which i added Left-side,center and right-side div, Right side div should be scrollable and footer should start where the ends.

.footer-area {
  padding: 70px 0px;
}

.single-footer-widget {
  color: #fff;
}

.right-side {
  float: right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-3 col-md-3 right-side" style="overflow-y:auto;max-height:1400px;">
  <div style="margin-bottom:15px;">
  </div>
</div>
<!-- //Footer -->
<footer class="footer-area" style="position:relative;">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-6 col-sm-6">
        <div class="single-footer-widget">
          <h6>Dedication</h6>
          <div class="row">
            <div class="col">
              <p>Dedicated to <u style="cursor:pointer;" data-toggle="modal" data-target="#introModal">"Mian Abrar-ul-Wahab Kakakhaill"</u></p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6">
        <div class="single-footer-widget">
          <h6>Navigation Links</h6>
          <div class="row">
            <div class="col">
              <ul>
                <li>
                  <a class="customText" href="index.php">
                    <p class="footerHover">Home</p>
                  </a>
                </li>
                <!-- <li><a class="customText" href="#tafseer">Daily Tafseer</a></li> -->
                <li>
                  <a class="customText" href="blog.php">
                    <p class="footerHover">Blog</p>
                  </a>
                </li>
                <li>
                  <a class="customText" href="about.php">
                    <p class="footerHover">About Us</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3  col-md-6 col-sm-6">
        <div class="single-footer-widget">
          <h6>Our Address</h6>

          <h6> UK OFFICE </h6>
          <p><strong>Suite 3 Davis House </strong><br>
            <strong>Lodge Causeway Trading Estate </strong><br>
            <strong>Lodge Causeway - Fishponds </strong><br>

          </p>

        </div>
      </div>
      <div class="col-lg-3  col-md-6 col-sm-6">
        <div class="single-footer-widget">
          <h6>OFFICE2 </h6>
          <p><strong>Capital Tower 2,Office # 2</strong><br>
          </p>
        </div>
      </div>

    </div>
  </div>
</footer>

Answer 1

After searching a lot on internet, i made a solution, I wrote a function inside document.ready and waited for 5 seconds and calculated the height of whole document and subtracted the height of footer and added that number to footer's margin-top.

$(document).ready(function (){
setTimeout(function(){
            var documentHeight = $(document).height(); 
            var footerHeight = $('.footer-area').height();
            var footerMargin = parseInt(documentHeight) - parseInt(footerHeight);
            $('.footer-area').css('margin-top',footerMargin);
  }, 50000);
});