IE6 Overflow Issue

<div style="float:left; width:50%;">
    div 1
    <div style="position:absolute; width:105%">nested element</div>
</div>
<div style="float:left; width:50%;">
    div 2
</div

If an element exceeds the width of its floated parent element, the next element is pushed down unless I apply overflow:hidden on both floated elements, which defeats the purpose because I DO NOT want to hide the overflowing content. Is there any fix开发者_JAVA技巧 for it?

You have to make sure the content inside is not wider than the divs to stop the elements being pushed down in this scenario.

You could perhaps put margin-right: -5% on the positioned div to make it's width narrower in the document flow, but it should still display at 105% wide once rendered.

Set it to 100%, not 105% - otherwise, it is simply doing what you told it to do.