Padding в блоке с текстом

Столкнулся недавно с интересной задачкой. Надо было сверстать для сайта Куракина страницу с ссылками пагинации. Сложность заключалась в том, что блок навигации по страницам статьи должен быть как-бы внутри прямоугольника.

kurakin-pages

Длинна строчки с перечнем страниц статьи соответственно может быть разной. В зависимости от количества страниц. А соответственно и прямоугольник должен растягиваться. Схематично надо такую штуку сделать:

padding

Для начала решил, что все просто. Надо строку заключить в <div> и указать в css нужный padding для этого дива. Попробовал так:

[/crayon]
а потом в коде страницы вывожу:

[/crayon]
В результате в Firefox все хорошо, а в IE7 отступы слева и справа есть, а сверху и снизу нет. В эксплорере получилось что-то вроде такого:

kurakin-pages-ie

Можно заметить, что высоту блока ИЕ7 не в состоянии оказался высчитать.

Возможно, кто-то скажет что и фиг с ним, но у меня есть psd по которой необходимо сверстать все как надо.

Целый вечер провозился с этим делом. И так пробовал и этак. Но всеравно не получалось то что надо. Либо высота не верная, либо растягивает подложку на всю ширину экрана.

В результате попросил помощи на одном из форумов для вебдизайнеров и там откликнулся некий AjiTae, который подсказал такие варианты:

Первый вариант:

[/crayon]
Все работает, но мне не нравится лишний раз использовать float. Из-за него постоянно в самый не подходящий момент чтонибудь куданибудь уезжает.

Второй способ:

[/crayon]
Такой способ также работает нормально, но не использует float. Поэтому я выбрал его. Хотя у него есть свои моменты. Например, если в блоке получится не одна строка, а две, тогда межстрочное расстояние получится слишком большое. Хотя меня это не напрягает, т.к. маловероятно, что перечень страниц будет таким большим.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *