Сначала я думаю, что у вас должен быть идентификатор в Div контекста ... Поэтому я назвал его # topper.
<div id="wide_line">
<div id="logo">Nice</div>
<div id="wider_line">
</div>
</div>
<div id="topper">...Context...</div>
Затем я сделал CSS следующим образом:
#logo{ background: #aaaaaa; float:left; width: 100%; }
#wide_line{ background: #bbbbbb; float: left; width: 100%; height: 7em; // controls height where context starts }
#wider_line{ position:static; z-index:2; background: #bbbbbb; float: left; width: 100%;overflow:hidden; height: 11em;}
#topper{
position:relative;
z-index:20;
}
Я не вижу, как это выглядит в IE, потому что я работаю в Ubuntu, но вы можете попробовать это, потому что это дает мне тот же вид, что и в вашем коде.Вот скрипка, Ссылка