Проблемы с плавающим div, содержащим форму и позиционирование moz-transform

Question

У меня есть многоразовая плавающая форма, которая используется на нескольких страницах. Я пытаюсь разместить форму на страницах на основе этих трех статей:

Float div Текстовый перенос вокруг абсолютного позиционированного div

Сжать div с преобразованием Сжать все в div

Удалить пробелы, вызванные преобразованием Пробел вокруг шкалы css3

Кажется, все работает нормально, пока я не добавлю -moz-transform в сочетании с плавающим div .

В зависимости от положения плавающего div (определяется значением высоты в теге: before), позиция преобразования может не работать с окружающим текстом. Поскольку div является плавающим, а форма используется на нескольких страницах, transform(pos x, pos y) не всегда может использовать правильный интервал с учетом окружающего текста.

Я что-то упустил? Можно ли использовать плавающий div с преобразованием, когда окружающий текст постоянно меняется?

My html:

<div id="div-container">
   <div id="div-form">
     <form id="embedded-form">....</form>
   </div>
</div>

My CSS:

#div-container {
    -moz-transform: translate( 0, 10px) scale(.8);
}
#div-form{
    -moz-transform: translate( 0, 20px) scale(1);
    }
#div-form form {
    float:left;
    clear:both;
}
#div-container:before{
    content:"";
    display:block;
    height:400px;
    float:left;
    }