Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Победа над флоатами

Научился наконец справляться с флоатами в HTML/CSS. С ними была такая проблема: если вертикальный размер у флоата больше, чем у текста, который его обтекает, а действие происходит внутри div’а, выкрашенного в зеленый, скажем, цвет, то вертикальный размер этого div’а становится равным вертикальному размеру текста, плюс поля. То есть получается, что флоат, скажем картинка, вылазит за див снизу. Когда этот div выкрашен в зеленый цвет, то эту засаду сразу видно. Всё это прямо следует из:
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.
(c) W3 Consortium

Это хоть и соответствует спецификации, но это бред. Решение проблемы: внутрь зеленого div’а добавляем в самом конце

<div class="fuck_w3c_standards"></div>

В CSS:

.fuck_w3c_standards {
  clear: both;
}
Подписаться на блог
Поделиться
Отправить
3 комментария
Spectator
А fuck_w3c_standards — это обязательно, без этого работать не будет?
Mash
1. На всякий случай:

RichInStyle.com — Proposals: Floats, an alternative perspective

Maxdesign.com — Floatutorial

Positioniseverything.net — Float: The Theory и http://www.positioniseverything.net/articles/flow-pos.html

2. Это не бред. В некоторых случаях — крайне полезное свойство плавающих блоков.

3. А вот <td style="width: 1%"><u class="hglday">((meanwhile/18-12-03/\" style=\"display: block; width: 100%\" onfocus=\"this.blur() **18**))</u></td> — бред. :)
Mash
Хм... Как-то интересно <a href> был отработан. Может быть я и накосячил где... Половина пятого у нас. :)

Вот то, что постил (href=«url»):
http://www.richinstyle.com/proposals/floatproposal.html
http://css.maxdesign.com.au/floatutorial/index.htm
http://www.positioniseverything.net/articles/float-theory.html
http://www.positioniseverything.net/articles/flow-pos.html
http://imfo.ru/archive/2003/04/06/calendarTable

Пользовательский интерфейс
Доступны три раздела
электронного учебника

Популярное