Проблема с макетом жидкости в Chrome

Question

У меня есть две колонки.Один с фиксированным размером (220 пикселей), а другой - с заполнением оставшегося пространства.

<div id="left-panel">

</div>

<div id="main-panel">
    Content
</div>

CSS:

#left-panel {
    float: left;
    width: 220px;
    height:auto !important;
    height:750px;
    min-height:   750px;
    border-right: 2px solid #d1d1d1;
    padding: 0px 0px 0px 30px;
}

#main-panel {
    margin: 20px 20px 0px 280px;
    overflow: hidden;
}

Проблема заключается в том, что в Google Chrome главная панельразверните, чтобы заполнить всю область.Он создает правое поле шириной #left-panel.

Я не могу перемещать основную панель, или содержимое не может расширяться до ширины #main-panel в других браузерах.Есть ли другой способ позволить плавающему элементу заполнить оставшееся пространство?

Вот рисунок, иллюстрирующий проблему:

http://img704.imageshack.us/img704/700/esquema1a.jpg http://img704.imageshack.us/img704/700/esquema1a.jpg

Спасибо заваша помощь.

Answer 1

Проблема с вашим кодом - overflow: hidden, который вы добавили в столбец переменной ширины.Удалите это, и это будет работать нормально.

Кроме того, вы должны попытаться немного очистить свой код - там много бесполезных свойств.Базовая реализация этого метода будет выглядеть примерно так: http://jsfiddle.net/8LF9F/1/

#fixed {
    width: 220px;
    float: left;
}

#variable {
    /* Width of #fixed + any margin you want */
    margin-left: 240px;
}

div {
    border: 1px solid #333;
}

Answer 2

Я думаю, это из-за вашего левого поля в # главной панели.

Попробуйте что-то вроде

#main-panel
{
   margin: 20px 20px 0px 0px;
   overflow:hidden;
}

Возможно, вам следует обернуть левую и основную панели, чтобы не использовать значение поля в основной панели.