I have a problem that has been vexing me...hopefully someone can answer it.

I want to have a child div expand to overlap the div next to it. It is for a calendar so that all day events that stretch for multiple days can stretch over and cover multiple days.

In IE6, the child div expands the width of the parent div and wrecks my display. The "proper" way that FF, Safari, and IE 7 & 8 do is that the child div will overlay the parent. The parent div's width remains unchanged, no matter what the width of the child is. IE6 incorrectly expands the width of the parent div to match that of the child div.

I've set up a small example so you can see the difference. Check it out in FF and then in IE 6. Notice that in IE6 the "parent" div is too wide. In FF it looks fine.

Any way to get IE6 to behave like FF in this case?

Thanks!

.parent {
 width: 200px;
 background-color: #FFC;
 border: 1px solid #000;
 float: left;
}

.child {
 width: 300px;
 background-color: #CAEDFF;
 border: 1px solid #000;
 z-index: 20;
 position: relative;
}


<div class="parent">
  <div class="child">Child Content</div>
</div>
<div class="parent">
Parent Content
</div>

2 answers

o.k.w 2355
1
point

Changing the 'position' property of the child DIV from 'relative' to 'absolute" would have almost done the trick except for the resulting z-index. It would have been stacked based on the 1st parent's and hence placed below the stacking order of the second parent.

So off my head, a not-so-ideal fix is to assign a higher z-index to the first parent which overrides the relative z-indexes based on the default stacking order of the parent DIVs.

Here's the code: CSS:

<style type="text/css">
.parent {
 width: 200px;
 background-color: #FFC;
 border: 1px solid #000;
 float: left;
}

.parent1 {
 z-index: 1;  /* assign higher z-index to first parent */
}

.child {
 width: 300px;
 background-color: #CAEDFF;
 border: 1px solid #000;
 z-index: 20;
 position: absolute; /* change from relative to absolute */
}

</style>

HTML:

<div class="parent parent1"><!-- assign 1 more class to 1st parent -->
  <div class="child">Child Content</div>
</div>
<div class="parent" style="z-index: 0;">
Parent Content
</div>

It 'should' work though I've yet to test it on IE6.

Answered almost 7 years ago by o.k.w
0
points

Great thanks, that solves the little example I had made...but unfortunately our real page is a little more complicated. We can't use absolute positioned divs because we need to have the child divs push down content below them, especially for text resizing.

The actual page is a calendar application. I've attached a sample dummy page so you can see the code. I want the "daytime" events able to stretch across multiple days if needed. In all browsers except IE6 the day events are displayed across multiple days as needed. But in IE6 they are hidden behind the following DIV. Is there a solution or will I need to redesign the page to use tables?

Here is a link to the page:

My Calendar Page

Thanks for the help!

Answered over 6 years ago by jeremyk