Fixed positioned div with a fixed height and relative or absolute divs inside it with greater height

Question

Hello

I have a problem with IE.

I have a fixed div like this:

#fixed {
position: fixed;
top: 0px;
left: 0px;
z-index: 9998;
width: 100%;
height: 40px;
}

Inside this div I want to place another div that has a height that is higher than its holder (higher than 40px). So I put a relative or an absolute div inside it and it works splendid in all browsers except IE, at least IE8.

But in IE8 the child div gets cut because of the height of 40px specified for it's holder.

Is there any workaround to this problem? I'm starting to get gray hairs..

Answer 1

Quick reply: have you tried setting the clip property of the contained div to it's own size?

Another workaround would be (if, say you have a container div with left/right margins auto and position: relative) to have the second div outside the fixed div in your HTML, then position it fixed within the container div instead - since it's also fixed, you can then set top/bottom and left/right positions to suit.