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

Новости | Инвентарь | Портфолио | Магазин | Компания | Ководство

| Техногрет |  |  |  |

HTML XSLT JavaScript Etc

Владимир Токмаков
(vlalek@design.ru)

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

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

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

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

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

Колонка шириной 30%
Колонка шириной 70%, которая начнет «прыгать» при изменении ширины окна IE
Колонка шириной 30%
Колонка шириной 70%, которая ведет себя правильно (в соответствии со стандартами CSS)

    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

    <style type="text/css">
        body { background: #ffffff; }
        .wrong_columns { clear: both; width: 100%; margin-bottom: 1em; }
        .wrong_columns .a,
        .wrong_columns .b
        { float: left; }
        .wrong_columns .a { width: 30%; background: #ccffcc; }
        .wrong_columns .b { width: 70%; background: #ffcccc; }

        .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: 15%; background: #ffcccc; }
    </style>
    <div class="wrong_columns">
        <div class="a">Колонка шириной 30%</div>
        <div class="b">Колонка шириной 70%,
            которая начнет &laquo;прыгать&raquo;
            при изменении ширины окна&nbsp;IE</div>
    </div>
    <div class="columns">
        <div class="a">Колонка шириной 30%</div>
        <div class="b">Колонка шириной 70%,
            которая ведет себя правильно
            (в&nbsp;соответствии со&nbsp;стандартами CSS)</div>
    </div>

Электропочта: mailbox@artlebedev.ru Телефоны и адреса студии Телефон: (495) 540-18-00 | © 1995—2006 Студия Артемия Лебедева |