I have a project where I need to load a html page to another page. I have used jquery for that.But the problem is whenever the page is loaded the div elements are not positioned correctly(check the picture screenshot below). They are working once inspect element is clicked. I had checked many questions based on this wierd functioning but couldn't get through this error.Here is my code:  

 HTML part:

```
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script  src="js/jquery1.js" type="text/javascript"></script>
    <script src="js/custom.js"></script>  
</head>
<body>
      <div id="sidebar">
           <ul>
             <li id="ft-bar"><h3><a><span class="icon-signal"></span>Freshtime Context Bar</a></h3></li>
           </ul>
      </div>
      <div id="maincontent">
      </div>
   <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   </script>
</body>
</html>      

```

Javascript: 

```
    $(document).ready(function(){
            $('#ft-bar').click(function(){   
               $('#maincontent').load('ftp-bar.html');     
         })     
    }); 

```

ftp-bar.html file:

```
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Product Life range slider</title>  
  <link rel="stylesheet" type="text/css" href="css/main.css" />  
  <script  src="js/jquery1.js"></script>
  <script  src="js/colResizable-1.3.min.js"></script>
  <script type="text/javascript">
$(function(){   

    //callback function
    var onSlide = function(e){
        var columns = $(e.currentTarget).find("td");
        var ranges = [], total = 0, i, s ="Ranges: ", w;
        for(i = 0; i<columns.length; i++){
            w = columns.eq(i).width()-10 - (i==0?1:0);
            ranges.push(w);
            total+=w;
        }        
        for(i=0; i<columns.length; i++){            
            ranges[i] = 100*ranges[i]/total;
            carriage = ranges[i]-w
            s+=" "+ Math.round(ranges[i]) + "%,";           
        }           
        s=s.slice(0,-1);            
        $("#text").html(s);
    }

    //colResize the table
   $("#product-life-slider").colResizable({
        liveDrag:true, 
        draggingClass:"", 
        onResize:onSlide,
        gripInnerHtml:"<div class='box1'>Grower <br> 2 Days</div>   <div class='label1'></div>", 
        minWidth:8
        });

}); 
  </script>

 </head>
 <body>
<div class="containerftp">  

        <table width="80%" border="0" cellspacing="5" cellpadding="0">
      <tr>
        <td width="20%"><input type="text" class="ftp" name="Days to Useby" placeholder="Days to Useby" value=""></td>
        <td width="20%"><input type="text" class="ftp" name="Storage Temp" placeholder="Storage Temp" value=""></td>
        <td width="20%"><input type="text" class="ftp" name="Storage Time" placeholder="Storage Time" value=""></td>
        <td width="20%"><input type="range" class="ftp" value="30" min="0" max="100"/></td>
        <td width="20%"><input type="text" class="ftp" name="Average Temperature" placeholder="Average Temp" value=""></td>
      </tr>
    </table>    

    <br/><br/><br/><br/><br/><br/>      

    <table id="product-life-slider" width="80%" cellspacing="0" cellpadding="0" border="0" padding-left="2%">
        <tr>
            <td class="partner" width="2%"></td>
            <td class="partner" width="24%"></td>
            <td class="partner" width="6%"></td>
            <td class="partner" width="27%"></td>
            <td class="consumer" width="14%"></td>
            <td class="useby" width="27%"></td>
        </tr>
    </table>

</div>

```

CSS part:

```
.containerftp{margin:5% auto;text-align:left; position:relative;}

input[type=range].ftp:first-of-type {width: 120px;}
input.ftp {padding:10px;width:85%;border:1px solid #c5dbef;border-radius:5px; background:#e0effc;font-size:14px;}
input.ftp ::-webkit-input-placeholder {color: rgba(0,5,143,.5);text-transform: uppercase;}
input.ftp ::-moz-placeholder {color: rgba(0,5,143,.5);text-transform: uppercase;}
input.ftp :-moz-placeholder {color: rgba(0,5,143,.5);text-transform: uppercase;}  /* Older versions of Firefox */
input.ftp :-ms-input-placeholder { color: rgba(0,5,143,.5);text-transform: uppercase;}

#product-life-slider {border:1px solid #A6C9E2; border-radius:5px;}
#product-life-slider td{height:100px;border:none;}

.partner{background: rgba(154,255,87,1);
background: -moz-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(154,255,87,1)), color-stop(100%, rgba(68,201,59,1)));
background: -webkit-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: -o-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: -ms-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: linear-gradient(to bottom, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9aff57', endColorstr='#44c93b', GradientType=0 );   
border-right: 1px solid #000 !important;}

/* consumer */    
.consumer{background: rgba(255,238,87,1);
background: -moz-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,238,87,1)), color-stop(100%, rgba(255,176,66,1)));
background: -webkit-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: -o-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: -ms-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: linear-gradient(to bottom, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffee57', endColorstr='#ffb042', GradientType=0 );
border-right: 1px solid #000 !important;}

 /* UseBy */      
.useby{background: rgba(255,160,87,1);
background: -moz-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,160,87,1)),    color-stop(100%, rgba(255,88,66,1)));
background: -webkit-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: -o-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: -ms-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: linear-gradient(to bottom, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa057', endColorstr='#ff5842', GradientType=0 );}

  /* column anchors */    
div.box1{   position: absolute;
        margin-top:-55px;
         margin-left:-36.8px; 
         width:70px;height:40px;
         background:#e0effc; 
         border-radius:5px; 
         border:1px solid #c5dbef; 
         font-size:13px; 
         padding:5px; 
         text-align:center;
          }
 div.label1 {position: absolute; 
        margin-left:-9px;
        width:0;height:0;
        border-left:13px solid transparent;
        border-right: 13px solid transparent;
        border-top: 13px solid #e0effc; 
        cursor:e-resize;}

```

The code is a bit messy but someone please help me in resolving this issue.
Thanks in advance.  

 Here is the image:![enter image description here](https://i.stack.imgur.com/hVvlq.jpg)