title: Large header in jqGrid
body: <p>I've been fiddling with asp.net mvc 3 with the new razor view engine. </p>
  
  <p>My goal is to have a fixed-fluid 2 column layout with a jqGrid in each column. I'm having no luck though! As soon as I add a grid to the right column its header goes huge. I don't think its jqGrids fault because if i remove the styles both grids display as expected. </p>
  
  <p>I see that the css for the jqGrid applies display: block to the header as part of the ui-helper-clearfix class.</p>
  
  <p>Anyone have any suggestions to get this to work or other fixed-fluid css i could experiment with (I've tried a bunch of templates from online with no luck)?</p>
  
  <p>Code from the template file:</p>
  
  <pre><code> ...       &lt;style type="text/css"&gt;           
              #left { float: left; width: 400px;}
              #content { margin-left: 400px;}               
          &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
              &lt;div&gt;
                  &lt;div id="left"&gt;                
                      @RenderSection("SPTreeGrid")
                  &lt;/div&gt;
                  &lt;div id="content"&gt;
                      @RenderSection("ClientPickerGrid")
                  &lt;/div&gt;                         
             &lt;/div&gt;
  &lt;/body&gt; 
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/khLBQ.jpg" alt="enter image description here"></p>
  
  <p><strong>Update:</strong> </p>
  
  <p>My page actually needed to display 2 grids in fixed width on the left and a fluid one on the right. </p>
  
  <p>It was an issue with my css (I still dont know why) but I ended up using the following layout which works (rail is the left column): </p>
  
  <pre><code>#container{
  overflow:hidden;
  padding-left:400px; /* The width of the rail */
  }
  * html #container{
  height:1%; /* So IE plays nice */
  }
  #content
  {   
  width:100%;
  border-left:400px; /* The width and color of the rail */
  margin-left:-400px; 
  float:right;
  }
  #rail{
  width:400px;
  float:left;
  margin-left:-400px;
  display:inline; /* So IE plays nice */
  }
  </code></pre>
  
  <p>cshtml:</p>
  
  <pre><code> &lt;div id="container"&gt;
      &lt;div id="content"&gt;
          @RenderSection("ReportGrid")
      &lt;/div&gt;
      &lt;div id="rail"&gt;           
              @RenderSection("SPTreeGrid")           
              @RenderSection("ClientPickerGrid")           
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>