jqGrid Title Height Problem

This fiddle illustrates a bug in jqGrid, where the title takes on the height of any floated divs next to it.

by tiritas

HTML

<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/themes/redmond/jquery-ui.css">
<h1>Problem</h1>
<div style="min-width: 800px">
    <div style="float: left; width: 100px; height: 100px; border: 1px solid red;"></div>
    <div style="margin-left: 110px;">
        <table id="grid1"></table>
    </div>
</div>

<h1>Work Around</h1>
<div style="float: left; width: 100px; height: 1px;">
    <div style="height: 100px; border: 1px solid red;"></div>
</div>
<div style="margin-left: 110px;">
    <table id="grid2"></table>
</div>

CSS

body, td, th {
    font-size: 75%;
}

h1 {
    margin: 10px 0 5px 0;
    font-size: 1.5em;
    font-weight: bold;
}

JavaScript

var options = {
    datatype: "local",
    height: 100,
    colNames: ['Date', 'Client'],
    colModel: [
        { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
        { name: 'name', index: 'name', width: 100 }
    ],
    caption: "Title Height Bug"
};

jQuery("#grid1").jqGrid(options);
jQuery("#grid2").jqGrid(options);

var mydata = [
        {invdate:"2007-10-01",name:"test"},
        {invdate:"2007-10-02",name:"test2"},
        {invdate:"2007-09-01",name:"test3"}
        ];
for (var i = 0; i <= mydata.length; i++) {
    jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]);
    jQuery("#grid2").jqGrid('addRowData', i + 1, mydata[i]);
}