Столкнулся с небольшой трудностью по верстке, выделенному красным цветом фрагменту. Дивами сверстать не получилось, постоянно какие-то непонятки выскакивают. (то ссылки не кликабельные, то с позиционированием что-то не то) Попробовал табличной версткой, но не знаю как сделать разницу высоты, отмеченную красной стрелкой на рисунке. Подскажите пожалуйста! Сам давно не занимался версткой, позабывал многое.

вот этот блок у тебя должен выглядеть примерно так

Высота у 4-х блоков одинаковая, я правильно понимаю ? В каждом три контейнера.. Что мешает сделать блок фиксированной высоток. Название прижать к верху, кнопку книзу?

высота 2-го и 4-го блоков немного меньше, чем 1-й и 3-й. Но у меня запарка получается с позиционированием. Absolute ставить не совсем подходит,  а relative - получается венегрет с координатами. Каждый последующий блок привязывается к координатам предыдущего. Конечно, может я что-то не так делаю. Попробую еще. Спасибо!

Johny_03, А в чем вообще проблема?
http://jsfiddle.net/EQX3S/
Слегка доработанный макет от Gold Dragon. container добавлен для совместимости с IE, из за которого указывать размер одновременно с марджинами и паддингами небезопасно.

Стиль block можно делать как с float:left( тогда внизу нужно разметить элемент с clear:both), так и с inline-block, что тянет за собой дополнительных тараканов(несовместимость со старыми IE и учет размера пробельного символа между элементами), но зато позволяет выравнивать элементы с помощью text-align:justify

да я про это и говорю... поставь height

вот что-то такое

Добавлено @ 13:16


Добавлено через 7 минут и 21 секунду
http://jsfiddle.net/jXqP7/

Это сообщение отредактировал(а) Gold Dragon - 23.1.2013, 13:20

Спасибо, очень сильно помогли!

Ваши примеры работают в IE. А мой почему-то не хочет... Вместо блоков - пустота. http://jsfiddle.net/EQX3S/3/

И еще не получается установить ссылку на "Название" и на "Кнопку" (чтобы кликабельным был не только текст, но и фон-кнопка). Пробовал с <a href="#"></a> внутри дива и вне дива - все сдвигается и фон исчезает. Как правильно реализовать этот момент?

Это сообщение отредактировал(а) Johny_03 - 24.1.2013, 01:54

ну по-первых, ты задаёшь высоту сначала для всех блоков, а потом для каждого да ещё разной высоты


это как? поясни

Johny_03, как можно заметить - разметка у разных блоков разная. Где-то есть услуги, где-то нет. Раскраска разных блоков тоже разная, так что пользоваться :nth-child(X) не особенно разумно. Сейчас css слишком завязан на верстку, при смене разметки придется пперелопатить и стилевые правила. Imho, проще и понятнее назвать каждый конкретный див соответствующим классом и строить css в соответствии с классовыми селекторами. Приятным бонусом будет совместимость с IE8--   

Например в этом блоке

...будет текст "Подробнее" на фоне #ccc;
Нужно сделать так, чтобы работал клик на фоне #ccc, т.е. этот фон и является кнопкой, на которую нужно сделать клик. На макете выше это выглядит, как кнопка "Подробнее".

зато HTML чистый   

попробуй сделать А блоком и задай размеры как у блока.. или повесь обработчик клика на блок

Понял, что чем дальше пытаюсь что-то сделать, тем больше проблем. Особенно с совместимостью IE. Перепробовал все, на что хватило мозгов - а результат неутешающий.

я на него забил... Смотрю чтобы совсем дизайн не поехал... да и то только если Осёл 8 и старше.. просто надоело... Чем больше народа будут игнорировать Осла, тем больше народа будет переходить на другие браузеры и тем быстрее мы заставим майкрософт следовать спецификации, а не жить в 90-х прошлого тысячилетия

согласен с Gold Dragon