Question

<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 for it?

Answer 1

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.