Как сделать наплыв одного блока на другой, что бы работало во всех клиентах, верстая письма?

Question

[Ivan Ukhov]

Answer 1

[Владимир Проскурин]

Посмотрите, как сделано это в этом письме которое вы заскринили.

Comments

[Ivan Ukhov]

такое чувство что фиолетовый блок это фоновая картинка, но так и не смог в дев тулз найти этому подтверждение

[Владимир Проскурин]

Ivan Ukhov, скиньте мне копию на [e-mail]

[Ivan Ukhov]

Владимир Проскурин, выслал

[Владимир Проскурин]

Ivan Ukhov, попытаюсь объяснить, как там
Сначала создается первая строка в таблице tr, в ее td ставится нулевая высота, и в него кидается div с

height: 0;
    max-height: 0;
    overflow: visible;

в этом диве уже лежит еще один див, который мы и видим с цветом, его стили

background: #009033;
    height: 140px;
    width: 100%;

т.е. получается, строка с нулевой высотой, из которой вылезает див с цветом (а строка так и остается с нулевой высотой, не двигая вторую строку).

Так мы сделали фон. Но нужно еще разместить лого. Для этого создали вторую строку tr, в нее кинули td с атрибутом bgcolor="#7000e3" и в него уже лого.

А на третьей строке размещается td

padding: 0 20px;
    text-align: center;

и в нем наш блок с контентом, у него стили

display: inline-block;
    vertical-align: top;
    width: 100%;
    max-width: 640px;
    text-align: left;

(mail удалил скругление углов, поэтому стили не добавил).
И этот блок перекрывает наш фон из первого tr.
Вот скрин
Там фиолетовый блок, это второй tr а зеленый это первый tr (я нарочно поменял цвета, чтобы было понятнее).
Я думаю, если у вас нет лого, можно обойтись только первым tr

[Ivan Ukhov]

Владимир Проскурин, Спасибо буду разбираться