Борьба с «прыгающими» блоками в IE

HTML и CSS XSLT JavaScript Изображения Софт Etc

Для просмотра этого примера необходим IE.

	Задача.	Исправить поведение блоков в IE с указанным `float` и шириной в процентах.

Решаем задачу благодаря недокументированной возможности использования отрицательного значения свойства margin (есть другое решение).

Как это выглядит в браузере

Колонка шириной 30%

Колонка шириной 70%, которая ведет себя правильно (в соответствии со стандартами CSS)

Колонка шириной 30%

Колонка шириной 70%, которая начнет «прыгать» при изменении ширины окна IE

<style type="text/css">
    body { background: #ffffff; }

    .columns { clear: both; width: 100%; }
    .columns .a,
    .columns .b
    { float: left; }
    .columns .a { width: 30%; //margin-right: -100%; background: #ccffcc; }
    .columns .b { width: 70%; //margin-left: 30%; //display: inline; background: #ffcccc; }
    
    .wrong_columns { clear: both; width: 100%; margin-top: 1em; }
    .wrong_columns .a,
    .wrong_columns .b
    { float: left; }
    .wrong_columns .a { width: 30%; background: #ccffcc; }
    .wrong_columns .b { width: 70%; background: #ffcccc; }
</style>
<div class="columns">
    <div class="a">Колонка шириной 30%</div>
    <div class="b">Колонка шириной 70%,
        которая ведет себя правильно
        (в&nbsp;соответствии со&nbsp;стандартами CSS)</div>
</div>
<div class="wrong_columns">
    <div class="a">Колонка шириной 30%</div>
    <div class="b">Колонка шириной 70%,
        которая начнет &laquo;прыгать&raquo;
        при изменении ширины окна&nbsp;IE</div>
</div>

Борьба с «прыгающими» блоками в IE

19 октября 2005

Как это выглядит в браузере