CSS table and parent div not following their height and width attributes? Jquery resizable

Question

I have a table(graphtable) inside a div(graphdiv) inside a div(half).

when i shrink half using jquery resizable the graphtable and graphdiv both increase in size. however using google developer tools the actual css of these elements have changed to the correct size.

inside the lowest div table is a dygraph which should resize to it's parent when the resize function is called on it's class.

i'm at a loss at how the css could say one thing and i could see another?

for(var i = 0; i<graphArray.length-1; i++){
    $( "#"+i ).resize(function() {
        var height = $(this).height();
        var width = $(this).width();
        $(this).find(".graph").height(height);
        $(this).find(".graph").width(width*0.68);
        $(this).find(".graph").find(".graphtable").height(height);
        $(this).find(".graph").find(".graphtable").width(width*0.68);
        window.graphArray[$(this).attr('id')].resize();
    });
}

.half{
background-color:#F2F2F2; 
width:48%;
height:50%;
border: 1px solid;
margin-top:1%;
float:left;
}
.graph{
width: 68%;
height: 100%;
float: left;
display:table;
}
.graphtable{
background-color:#F5F5F5; 
width:100%;
height:100%;
}

<?php
echo "<div class='half' id='$i' name='".$graph['graph_id']."' style='position:absolute; top:".$top."px; left:".$left."px'>";
echo "<div id='graph' class='graph'>";
echo "<table id='graphtable$i' class='graphtable' style='width:100%; height:100%'></table>";
echo '</div>';
echo '<div class="dragger">Drag</div>';
echo '<div class="resizer">+</div>';
echo '</div>';
?>

I have tride using .atrr on both the graph div and graphTable as well, but no luck.

Answer 1

apparently there is an additional div that dygraph is bound to, so i added the two lines below to fix the resize problem. i'm sure there is a nicer way to do what i have done here, but at the moment it works. i will deal with performance at a later date

for(var i = 0; i<graphArray.length-1; i++){
    $( "#"+i ).resize(function() {
        var height = $(this).height();
        var width = $(this).width();
        $(this).find(".graph").height(height);
        $(this).find(".graph").width(width*0.68);
        $(this).find(".graph").find(".graphtable").height(height);
        $(this).find(".graph").find(".graphtable").width(width*0.68);
        $(this).find(".graph").find(".graphtable").find("div").width(width*0.68); //added
        $(this).find(".graph").find(".graphtable").find("div").height(height); //added
        window.graphArray[$(this).attr('id')].resize();
    });
}