Владимир Токмаков

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


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

Задача.

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

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

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

Колонка шириной 30%
Колонка шириной 70%, которая ведет себя правильно (в соответствии со стандартами CSS)
Колонка шириной 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 
27 
28 
29 
<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>



Поделиться ссылочкой: