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

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Владимир Токмаков

6 апреля 2007


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

Задача.

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

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

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

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

Колонка шириной 30%
Колонка шириной 70%, которая не скачет
Колонка шириной 30%
Колонка шириной 70%, которая начнет «прыгать» при изменении ширины окна IE
01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
<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>