Заголовок jqGrid становится большим при использовании float в css

Question

У меня был jqGrid, отображающий совершенно нормально.

Затем я начал разрабатывать базовую структуру макета сайта и столкнулся с проблемой: заголовок jqGrid стал действительно огромным! :)

Вот скриншот .

Структура страницы:

* * 1010

и 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;
}

Я обнаружил, что что-то сломалось из-за поплавков: как только я их удаляю, заголовок jqGrid возвращается к нормальному размеру (хотя другие части макета портятся;))

Также я заметил, что с плавающими заголовками простирается точно на величину высоты правой боковой панели, поэтому похоже, что она пытается плавать ...

Я также пытался очистить поплавки, поставив
перед jgGrid, но это сместило его в конец страницы за боковые панели, это не то, что я хочу.

Я делаю только первые шаги к css / html / jqgrid, поэтому я могу пропустить что-то действительно очевидное: -)

Answer 1

Прежде всего, мне кажется, вы должны исправить margin значение #centralpart на следующее

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

Чтобы решить вашу основную проблему, вы должны явно указать height div титулбара div.ui-jqgrid-titlebar:

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

Как вы можете видеть на демоверсии результаты будут намного лучше после изменений. (Я включил background-color в каждый div, чтобы более четко определить размер каждого div.