How can i get my Jchartfx area graph to show up underneath my gridview?

My page renders like this this, The graph keeps showing up at the top left corner, even though the div its supposed to show up in is in the correct position(underneath the grid view).

var chart1;
function makeGraph(mpy)
{
    if (mpy == undefined) mpy = 12.00;
    chart1 = new cfx.Chart();
    chart1.getData().setSeries(1);
    chart1.getAxisY().setMin(baseRoi-50);
    chart1.getAxisY().setMax(finalroi+50);
    var series1 = chart1.getSeries().getItem(0);
    series1.setGallery(cfx.Gallery.Area);
    var data=genGraphData(mpy);       
    chart1.setDataSource(data);
    var divHolder = document.getElementById('ChartDiv');
    chart1.create(divHolder);
}

my html looks like

<div id="pnlROIDetails">
<label id="lblRoiResult"> </label>
<div id="pnlROIChart">
    <label id="lblHelp">Help</label>
    <div id="jqxgrid" style="font-size: 13px; font-family: Verdana; float: left;"> </div>
</div>
<div id="pnlROIGraph" style="clear:both">
    <div id="ChartDiv" style="width:700px;height:500px; float:left;">
    </div>
</div>

I am assuming all of this can be fixed with css, I am just not sure how. Any help is greatly appreciated, thanks!

Solution

I would suggest using relative and absolute positioning to force your grid to stay within it's wrapper.

Based on the picture you gave though, it's hard for me to actually tell which div is the grid. I would guess #ChartDiv is the same as #chartWrapper (in my example below) and the #chart might be the next one under, but I'd need you to confirm that by being able to highlight the actual grid with the dev tools like you did for the image.

So, the solution would go as follows: #chartWrapper { position:relative; } #chart { position:absolute; top:0px; left:0px; }

An absolutely positioned item calculates its' point of reference as the closest parent with the position:relative style. So for the above example, the #chart would be 0px from the top of #chartWrapper and 0px from the left of it.

Hope that helps!