jqGrid header becomes big when using float in css

问题:

I had a jqGrid displaying perfectly ok.

Then I started to develop a basic site layout structure and got into problem: jqGrid's header got really huge! :)

Here's the screenshot.

The structure of the page:

<div id="sidebar1" />
<div id="sidebar2" />
<div id="centralpart">
    <div id="jqgrid">....</div>
</div>

And css:

#sidebar1 {
  float: left;
  width: 150px;
  padding: 10px 10px;
}

#sidebar2 {
  float: right;
  width: 300px;
  padding: 10px 10px;
}

#centralpart {
  margin: 0 300px 0 150px;
  text-align: center;
}

I detected that things broke because of floats: once I remove them jqGrid's header goes back to normal size (although other parts of layout get messed up ;))

Also I noticed that with floats header spans down exactly by amount of height of the right sidebar, so it looks like it tries to float it...

I also tried to clear floats by putting <br style="clear:both" /> before jgGrid, but that shifted it to the bottom of the page beyond sidebars, that's not what I want.

I'm only taking my first steps to css/html/jqgrid, so I can miss something really obvious :-)

回答1:

First of all it seems to me you have to fix margin value of #centralpart to the following

#centralpart {
    margin: 0px 320px 0px 170px;
    text-align: center;
    background-color:red
}

To solve your main problem you should set height of the titelbar div div.ui-jqgrid-titlebar explicitly:

div.ui-jqgrid-titlebar {
    height: 16px;
}

Like you can see on the demo the results will be much better after the changes. (I included background-color in every div to see more clear the size of every div.