Еще один способ борьбы с «прыгающими» блоками в IE

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

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

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

Обнаружил вот, что наличие ненулевого внутреннего отступа справа (padding-right: 1px) у окаймляющего элемента также исправляет эту неприятную ошибку.

У этого способа есть ограничения на использование. Но если вы с ними столкнетесь, вам может помочь предыдущее решение.

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

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

Колонка шириной 70%, которая не скачет

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

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

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

    .columns { clear: both; width: 100%; //padding-right: 1px; //overflow-x: hidden; }
    .columns .a,
    .columns .b
    { float: left; }
    .columns .a { width: 30%; background: #ccffcc; }
    .columns .b { width: 70%; 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;скачет</div>
</div>
<div class="wrong_columns">
    <div class="a">Колонка шириной 30%</div>
    <div class="b">Колонка шириной 70%, которая начнет &laquo;прыгать&raquo;
        при изменении ширины окна&nbsp;IE</div>
</div>

Еще один способ борьбы с «прыгающими» блоками в IE

6 апреля 2007

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