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).