Issue
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?
Solution
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.
Answered By - SwiftD
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.