Question

I am having problem with displaying div’s background overflow in IE (in my case 9). Firefox, Chrome, and Safari looks good. Here is the details:

<div id="wide_line">
  <div id="logo">Nice</div>
  &nbsp;
  <div id="wider_line">&nbsp;</div>
</div>
<div>...Context...</div>

The idea here is to put background from div#wider_line under the Context.

#logo{  
  background: #aaaaaa;
  float:left;
  width: 100%;
}

#wide_line{
  background: #bbbbbb;
  float: left;
  width: 100%; 
  height: 7em; // controls height where context starts
}

#wider_line{
  background: #bbbbbb;
  float: left;
  width: 100%;
  height: 11em; // controls width of the overflow of the assigned color
}

How can i fix it in IE?

Thanks a lot!

Answer 1

First I think you should have an id on the Context div…
So I called it #topper.

<div id="wide_line">
   <div id="logo">Nice</div>
   &nbsp;   
   <div id="wider_line">
       &nbsp;
   </div> 
</div> 
<div id="topper">...Context...</div>

Then I made the CSS like this:

#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;
}

I can’t see how it looks i IE, because i running at Ubuntu, but you could try this, because it give me the same look as with your code. Here’s a fiddle, Link