header overlapping the content

Question

I have placed an absolutely positioned element (header) after relatively positioned element (body content). Due to some reason and this works fine in all the browsers except IE8. The header is overlapping the content element with not positioned at its absolute position. The css rules I have used:

#bodyContent{
    clear: both;
    display: table;
    width: 920px;
    margin-top: 173px;
    _margin-top: 178px;
    position: relative;
}
#headerContainer {
    position: absolute;
    top: 0px;
    left:0px;
}

The header part is rendering from the content element postition with space in its position.

Is this the bug in IE8? Can anyone help me sort out this issue?

Answer 1

This sounds like an old IE7 bug.. can you place an element between them? That fixed it for me.

Answer 2

I've also had similar problems. I used the float command which solved the issue. Try float: left; in #headerContainer