I'm struggling to find a suitable title for this issue.
Currently, I am dealing with dynamically generated content that consists of <p> elements representing bookmark tags created by users. As the number of elements increases, I want the content below them to move down naturally to prevent any overlap.
To achieve this, I have employed an approach where I create an absolutely positioned element containing two relatively positioned elements inside it, as shown in the following code snippet (credit given to Stack Overflow):
<style>
#wrapper { position:absolute; }
#i_will_expand { position:relative; top:0px; left:0px; }
#i_will_move_down { position:relative; top:0px; left:0px; }
</style>
<div id="wrapper">
<div id="i_will_expand"><p class="single_tag">content here</p></div>
<div id="i_will_move_down"></div>
</div>
Although this method seems valid, my floated <p> elements do not occupy any space due to their nature. This results in the parent div having no vertical dimension, causing the content below it to overlap with the tags.
Considering removing the float property does not resolve the issue as the elements start flowing downwards instead of horizontally. Changing the display to inline also does not work as the width property is ignored, making the elements flow endlessly to the right.
After some reflection and external advice about the 'word break' property in CSS, I realized that the continuous <p> elements were being treated as a single long word. While breaking words did solve the width property issue, it caused my tags to break and lose margins, rendering them unusable. Time for a rethink after hours of trial and error.
If you know of a feasible CSS solution for expanding <p> elements, please share. Otherwise, I might resort to using JavaScript to address this challenge.
Related:
Width Property Ignored by Expanding P Elements
Positioning Relative to an Absolute Positioned Element - Feasible?
When Do Nested Child Elements Expand Their Parent Element?