How do I stop IE6 clipping an element positioned outside its parent via negative margins?

Question

I have an element positioned outisde its parent via negative margins, like this:

<style>
.parent {
    height: 1%;
}

.element {
    float: left;
    margin-left: -4px;
}
</style>

...

<div class="parent">
    <div class="element">Element</div>
</div>

In Internet Explorer 6, the part of .element positioned outside of its parent element is clipped, i.e. invisible, hidden, cut off. How do I fix this?

Answer 1

Assign position: relative; to .element, like this:

<style>
.parent {
    height: 1%;
}

.element {
    float: left;
    margin-left: -4px;
    position: relative; /* Fixes clipping issue in IE 6 */
}
</style>

...

<div class="parent">
    <div class="element">Element</div>
</div>

This is only necessary if the parent element hasLayout (which is too big a can of worms to get into here).

Answer 2

<style>
.parent {
    height: 1%;
    overflow: auto;
    _zoom: 1; /*ie6 hack forces has layout*/
}

.element {
    float: left;
    margin-left: -4px;
}
</style>

Answer 3

This happens with negative margins combined with floats in IE6.

If you can, get rid of the float:

.element {
   float: none:
   zoom: 1;
}