JQGrid header height - css

Question

I am using JQGrid within an ASP .NET MVC application. The grid itself is working great. However, the header height of the grid (or first grid on the page) is growing to match the height of my left navigation menu. Here is most of the Site.Master layout that I have. I just don't see why this is happening.
<div class="page">
<div>
<div id="left">
<div id="leftnavmenu">
<%= Html.MvcSiteMap().Menu("MvcSiteMapProvider", "activenav")%>
</div>
<div id="leftnav-msg">
Message goes here
</div>
</div>
<div id="main">
<div id="mainsitename">
<div id="mainsitenameimage"></div>
<div id="mainsitename1">Intake Tool</div>
</div>
<div id="mainpagetitle">
<%--<%=Html.MvcSiteMap().SiteMapPath(" > ") %>--%>
<asp:ContentPlaceHolder ID="PageTitle" runat="server" />
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="maintabledata">
<asp:ContentPlaceHolder ID="TableContent" runat="server" />
</div>
<div id="footer"></div>
</div>
</div>
</div>

Answer 1

I assume that #left has a float:left style, while #main does not. This appears to be a bug with jqGrid. There's another post that deals with the exact same issue.
I have actually created a jsFiddle example that illustrates the problem.
In the other post Oleg suggests that you use float:left on both side-by-side <div>s, with another div with clear:both after them. This would not work in my case, because I want the right div to expand to the whole remaining width of the browser window. Floated <div>s must have explicit widths associated with them (if not, they take on the width of the widest element inside them).
One work-around that worked for me is to set a height of the floated <div> to something small (1px) and set an explicit height for the content of that div. This is illustrated in the jsFiddle above.