HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Прыгающие float колонки с процентной шириной в IE6

Вы наверно встречали баг ие6, что при, например, двух float колонках с процентной шириной, при ресайзе окна они начинают скакать туда-сюда. Посмотрим, как можно пофиксить эту проблему.

Сама проблема заключается в том, что ие6 при процентной ширине округляет значения до целого числа. И, вследствие чего, при дробных значениях, блокам задается ширина +1px, они не умещаются рядом и начинают скакать.

Оказывается есть простой способ решения данной проблемы:

1
2
3
4
5
6
7
8
9
10

<div class="left"></div>
<div class="right"></div>
 
<style type="text/css">
  .left, .right {
    float: left;
    width: 50%;
    clear: right; /* в этом вся и фишка */
  }
</style>

За это короткое и красивое решение спасибо этой статье.

Метки: , , ,

Запись опубликована 17.07.2009 в 18:03 и размещена в рубрике css. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (2) на “Прыгающие float колонки с процентной шириной в IE6”

  • creativo:
    19.01.2011 в 02:56

    Да, и каких хаков не надо

  • Алекс:
    26.07.2011 в 17:20

    *Простой совет от Алекса*
    Была у меня ситуация, когда правая колонка «съезжала» под соседний div: основной слой шириной 900px, внутри него два div размерами 700px и 200px соответственно, со значением float:left. IE6 настойчиво не хотел «видеть» правую колонку (200px) и «подсовывал» её под соседнюю, ту, которая шириной 700px. Что я сделал? Да ничего. Внимательно посмотрел код и нашел слой, внутри которого был отступ — padding:5px. Он то и давал «лишние» пиксели, отодвигая правую колонку. Поэтому, надо или убрать padding (если такой имеется в коде соседней колонки), или добавить в ширину основного («родительского») дива дополнительные пиксели (но это не лучшее решение). Так что, прежде чем добавлять что-то в стили CSS (для IE6), надо посмотреть весь код на наличие ошибок или «лишних» отступов ;)
    Делаю Ростовский сайт здесь АлексДо.ру

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос