Stop absolutely positioned div from overlapping text

Answer 1

Thank you for all your answers, Whilst all were correct, none actually solved my problem. The solution for me was to create a second invisible div at the end of the content of unknown length, this invisible div is the same size as my absolutely positioned div and is set to float left, this ensures that there is always a space at the end of my content for the absolutely positioned div and where room is available it will position along side left floated content.

This answer was previously provided here: Prevent absolutely-positioned elements from overlapping with text However I didn't see (until now) how to apply it to a bottom right positioned div.

New structure is as follows:

        
Content of unknown length
        
Content of unknown height
        

        

    

This seems to solve the issue.