• Техногрет
  • Борьба с «прыгающими» блоками в IE

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

    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>