Stop absolutely positioned div from overlapping text
Here is a simplification of my layout:
<div style="position: relative; width:600px;"> <p>Content of unknown length</p> <div>Content of unknown height</div> <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;"></div> </div>
The problem I'm having is that if the text/unknown div content is too long it is overlapping my absolutely positioned div.
I have searched the web and SO for a solution and the only one I found suggested putting an invisible div where absolutely positioned div is - trouble is if I could do that I wouldn't need to have the absolutely positioned div in the first place (or am I missing the point here).
Can anyone think of a css solution before I go down the jquery route?
Short answer: There's no way to do it using CSS only.
Long(er) answer: Why? Because when you do position: absolute;, that takes your element out of the document's regular flow, so there's no way for the text to have any positional-relationship with it, unfortunately.
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:
<div style="position: relative; width:600px;"> <p>Content of unknown length</p> <div>Content of unknown height</div> <div id="spacer" style="width: 200px; height: 100px; float:left; display:inline-block"></div> <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;"></div> </div>
This seems to solve the issue.