Чтоб один див перекрывал другой

[Floater]

Здравствуйте. Я тут с хедером мучаюсь.

http://jsbin.com/osiqimI/1/edit?html,css,output

 

В верхней части див с фоном.

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

В нижнем диве есть еще один(красная рамка), он непрозрачный и немного тоже перекрывает фон.

 

На примере все расположено правильно, но мне нужно убрать:

.header_content{position: absolute;}

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

[advokatua]

Например так http://jsbin.com/osiqimI/4/

А вообще жесть какая-то налеплена, с виду.

[Floater]

Спасибо, но при зуме всеравно все нарушается.

Edited January 14, 2014 by Floater

[advokatua]

Естественно валится. Поставь фиксированную ширину на обертку и не будет валиться.

 

ЗЫ Хотя до такого зума где она начинает валится все равно никто не дойдет. 

Edited January 14, 2014 by advokatua