Home/ Questions/Q 6842349
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T00:05:22+00:00

I’ve been fiddling with asp.net mvc 3 with the new razor view engine. My

  • 0

I’ve been fiddling with asp.net mvc 3 with the new razor view engine.

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.

I see that the css for the jqGrid applies display: block to the header as part of the ui-helper-clearfix class.

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)?

Code from the template file:

 ...       <style type="text/css">           
            #left { float: left; width: 400px;}
            #content { margin-left: 400px;}               
        </style>
</head>
<body>
            <div>
                <div id="left">                
                    @RenderSection("SPTreeGrid")
                </div>
                <div id="content">
                    @RenderSection("ClientPickerGrid")
                </div>                         
           </div>
</body>

enter image description here

Update:

My page actually needed to display 2 grids in fixed width on the left and a fluid one on the right.

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): 

#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 */
}

cshtml:

 <div id="container">
    <div id="content">
        @RenderSection("ReportGrid")
    </div>
    <div id="rail">           
            @RenderSection("SPTreeGrid")           
            @RenderSection("ClientPickerGrid")           
    </div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Although Oleg’s suggestion does fix the height of the title, it does not constitute a solution — at least not if you want the right div to be liquid and expand to the width of the browser window. The problem is that in order to use float:left on the right grid container, you must specify a width. Floated elements 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 to something small (1px) and set an explicit height for the content of that div.

    I have created a jsFiddle example that illustrates the problem and the work-around.

    • 0