Stop absolutely positioned div from overlapping text

Question

Here is a simplification of my layout:

    <div style="position: relative; width:600px;">          <p>Content of unknown length, but quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite long</p>          <div>Content of unknown height</div>          <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;background-color: red;"></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?

Answer 1

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, this ensures that there is always a space at the end of my content for the absolutely positioned div.

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 id="outer" style="position: relative; width:450px; background-color:yellow;">         <p>Content of unknown length</p>         <div>Content of unknown height </div>         <div id="spacer" style="width: 200px; height: 25px; margin-right:0px;"></div>         <div style="position: absolute; right: 0; bottom: 0px; width: 200px; height: 20px; background-color:red;">bottom right</div>     </div>

This seems to solve the issue.

Answer 2

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.

One of the possible alternatives is to float: right; your div, but if that doesn't achieve what you want, you'll have to use JavaScript/jQuery, or just come up with a better layout.