jQuery title bar height affected by floating div

I'm having a very weird jQuery problem.

I have a left nav div with this css:

#nav {
  float: left;
  width: 25%;
  padding: 10px;
  margin-top: 1px;
}

I have a body div with this css:

#body {
  margin-left: 30%;
  margin-top: 1px;    
  padding:10px;
  padding-bottom:60px;   /* Height of the footer */     
}

for JQuery i use struts plugin

sjg:grid
    id="gridtable"
    caption="Customer Examples"
    dataType="json"
    href="%{remoteurl}"
    pager="true"
    gridModel="gridModel"
    rowList="10,15,20"
    rowNum="-1"
    rownumbers="true"
    editurl="%{editurl}"
    editinline="true"
    onSelectRowTopics="rowselect"
    onEditInlineSuccessTopics="oneditsuccess"
    viewrecords="true"   

When I put jQuery grid in the body, its title bar stretches to match the height of the nav div. If I remove the left nav, the grid shows fine.

I've tried everything and googled until I'm blue in my face.

I开发者_JAVA技巧 would greatly appreciate any tips.

Edited to add:

struts grid tag opens into
jQuery(document).ready(function () { 
    jQuery.struts2_jquery.require("js/struts2/jquery.grid.struts2"+jQuery.struts2_jquery.minSuffix+".js");
    var options_gridtable = {};
    var options_gridtable_colmodels = new Array();
    var options_gridtable_colnames = new Array();

    options_gridtable_colmodels_id = {};
    options_gridtable_colmodels_id.name = "id";
    options_gridtable_colmodels_id.jsonmap = "id";
    options_gridtable_colmodels_id.index = "id";
    options_gridtable_colmodels_id.formatter = "integer";
    options_gridtable_colmodels_id.editable = false;
    options_gridtable_colmodels_id.sortable = false;
    options_gridtable_colmodels_id.resizable = true;
    options_gridtable_colmodels_id.search = true;
    options_gridtable_colnames.push("ID");
    options_gridtable_colmodels.push(options_gridtable_colmodels_id);

    options_gridtable_colmodels_name = {};
    options_gridtable_colmodels_name.name = "name";
    options_gridtable_colmodels_name.jsonmap = "name";
    options_gridtable_colmodels_name.index = "name";
    options_gridtable_colmodels_name.editable = false;
    options_gridtable_colmodels_name.sortable = true;
    options_gridtable_colmodels_name.resizable = true;
    options_gridtable_colmodels_name.search = true;
    options_gridtable_colnames.push("Name");
    options_gridtable_colmodels.push(options_gridtable_colmodels_name);
    options_gridtable.datatype = "json";
    options_gridtable.url = "/moneypulse2app/person/jsontable.action";
    options_gridtable.height = 'auto';
    options_gridtable.pager = "gridtable_pager";
    options_gridtable.pgbuttons = true;
    options_gridtable.pginput = true;
    options_gridtable.rowNum = -1;
    options_gridtable.rowList = [10,15,20];
    options_gridtable.viewrecords = true;
    options_gridtable.editinline = true;
    options_gridtable.caption = "Customer Examples";
    options_gridtable.autoencode = true;
    options_gridtable.rownumbers = true;
    options_gridtable.onselectrowtopics = "rowselect";
    options_gridtable.oneisuccess = "oneditsuccess";

    options_gridtable.colNames = options_gridtable_colnames;
    options_gridtable.colModel = options_gridtable_colmodels;
    options_gridtable.jsonReader = {};
    options_gridtable.jsonReader.root = "gridModel";
    options_gridtable.jsonReader.page = "page";
    options_gridtable.jsonReader.total = "total";
    options_gridtable.jsonReader.records = "records";
    options_gridtable.jsonReader.repeatitems = false;

    options_gridtable.jqueryaction = "grid";
    options_gridtable.id = "gridtable";

    jQuery.struts2_jquery_grid.bind(jQuery('#gridtable'),options_gridtable);

 });

It's kinda hard to share it on jsfiddle.net because of all jquery scripts. May be this HTML part will clarify something:

<div style="width: 325px;" class="ui-state-default ui-jqgrid-hdiv">
  <div class="ui-jqgrid-hbox">
    <table cellspacing="0" cellpadding="0" border="0" aria-labelledby="gbox_gridtable" 
           role="grid" style="width: 325px;" class="ui-jqgrid-htable">
      <thead>
        <tr role="rowheader" class="ui-jqgrid-labels">
          <th class="ui-state-default ui-th-column ui-th-ltr" role="columnheader" 
              id="gridtable_rn" style="width: 25px;">
            <div id="jqgh_rn">
              <span style="display:none" class="s-ico">
                <span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr" 
                      sort="asc"></span>
                <span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr" 
                      sort="desc"></span>
              </span>
            </div>
          </th>
          <th class="ui-state-default ui-th-column ui-th-ltr" role="columnheader" 
              id="gridtable_id" style="width: 143px;">
            <span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" 
                  style="cursor: col-resize;">&nbsp;</span>
            <div id="jqgh_id" class="ui-jqgrid-sortable">
              ID
              <span style="display:none" class="s-ico">
                <span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr" 
                      sort="asc"></span>
                <span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr" 
                      sort="desc"></span>
              </span>
            </div>
          </th>
          <th class="ui-state-default ui-th-column ui-th-ltr" role="columnheader" 
              id="gridtable_name" style="width: 142px;">
            <span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" 
                  style="cursor: col-resize;">&nbsp;</span>
            <div id="jqgh_name" class="ui-jqgrid-sortable">
              Name
              <span style="display:none" class="s-ico">
                <span class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr" 
                      sort="asc"></span>
                <span class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr" 
                      sort="desc"></span>
              </span>
            </div>
          </th>
        </tr>
      </thead>
    </table>
  </div>
</div>

Also, after playing in firebug it seems that changing this css item on grid header somewhat fixes the problem:

.ui-helper-clearfix {
    display: block;
}

if i remove display: block - the caption shrinks to appropriate height but to small width.

As commented, it would be easier to help if you removed HTML and jQuery code that was not related to the problem. Duplicate the HTML file and delete as much as you can without the problem disappearing. Once you have done this, edit your question and replace the old code with the shorter version.

In lieu of seeing this, have you tried to apply overflow: visible; to the block that is growing too big, and see if that resolves the issue?

I just faced this problem with jquery dialog boxes as well - a number of floating divs were causing the title of the dialog to grow in height. Adding overflow: hidden; fixed the problem for me - the title height became constant.