Анимация глючит

[Freakmeister]

Есть резиновая дивная вёрстка с анимацией скрытия боковых блоков: http://maestro-magnifico.ru/

Используется jQueryUI. Проблема в том, что при анимации боковых блоков, текст в центральном блоке не разъезжается плавно.

CSS центрального блока:

#center_column {

margin: 0px 190px; /* ширина боковых блоков + отступы */

border: 2px solid red; /* для наглядности */

}

Если сюда добавить ещё:

display: inline-block;

то, анимация текста становится плавной, но сам центральный блок опускается под высоту боковых блоков:

http://savepic.net/1291355.png

Как это исправить? =\

[Great Rash]

#center_column {
overflow: hidden;
border: 2px solid red; /* для наглядности */
}

И убрать из скрипта это:

if ($(this).attr('id')=='btn_l') {

    $('#center_column').animate({marginLeft: 20}, speed);

    } else {

    $('#center_column').animate({marginRight: 20}, speed);

    }

[Freakmeister]

Нет, overflow: hidden; я использовать не хочу. В центральном блоке не случайно стоит картинка, она нужна чтобы показать, что этот блок обтекает своё содержимое за счёт того, что в родительском диве #wrapper прописано display: inline-block;

Если я использую overflow: hidden; то картинка будет обрезаться.

Edited May 27, 2011 by Freakmeister

[Great Rash]

В центральном блоке не случайно стоит картинка, она нужна чтобы показать, что этот блок обтекает своё содержимое за счёт того, что в родительском диве #wrapper прописано display: inline-block;

Перечитал 4 раза. Так и не понял о чем это вы...

Если я использую overflow: hidden; то картинка будет обрезаться.

Нет не будет.

[Freakmeister]

Мне нужно, чтобы центральный див растягивался по содержимому, если в него засунуть картинку любых размеров. А если сейчас прописать overflow: hidden; и сузить страницу, то часть картинки спрячется. Я вот об этом.) Так что, overflow: hidden; это вообще не вариант.

[Great Rash]

Ок, тогда предлагаю юзать таблицу или отказаться от анимации скрытия/показа.

[Freakmeister]

Выяснил такую вещь, что при анимации все элементы становятся display: block. Отсюда и подлагивания неблоковых элементов. Вот только не понимаю почему когда я ставлю display: inline-block; центральному диву, то он уползает вниз? Выставление display: inline-block; боковым колонкам тоже не помогает, всё выглядит как показано тут:

http://savepic.net/1291355.png

/add

Добавил внутрь центрального блока ещё один див, обвёл зелёным бордером для наглядности, и прописал ему display: inline-block;. Есть прогресс, блоки встали на своё место, но при анимации зелёный див всё-равно "приседает".

Edited May 28, 2011 by Freakmeister