Question

I don’t know how to title this more accurately.

So I have dynamically generated content…basically <p> elements that represent bookmark tags that a user creates….as the element count increases I want the content below them to naturally move down..so there is no overlap.

I do this by creating an absolutely positioned element with two relatively positioned elements in it like this: (SO contributed – note below)

<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> 

I think this would work but because I have my <p> elements floated they take up no space (the magical CSS kind that doesn’t exist when you think it should)…like this:

p.single_tag
{
    padding:                    2px;
    margin:                     2px;    
    border:                     1px solid #dddddd;
    float:                      left;
    font-size:                  14px;
    color:                      #888888;
    cursor:                     pointer;
}

Hence my div holding the tags has no y dimension…hence the div below it never moves down…and snap my tags flow into my bookmarks.

Now I thought why not remove the float..so that I get “real space”…this does not work…b.c now…the p elements flow down instead of to the left….so I thought…why don’t I set the display to inline so the elements flow left to right….cool, but now they ignore the width property…I mean they keep flowing to the right for all eternity….so…..I punched myself in the head a few times (not realy)…and thought…how can I fix this….

After posting somebody mentioned a property…something about ‘word break’ and I added this property in and I had hope….I understood CSS…it was treating…my continuous

elements as one long word…that’s right it was treating multiple paragraphs as one long word…but if I made words breakbable…then it would now follow the width property…….however….

now my tags were broken b.c. they got split in two at line breaks…plus all my top and bottom margins disappeared..so they were complety fubarred and unusable eseentially….back to the drawing board 3 hours later.

Please help if there is a viable CSS solution to expanding <p> elements.
I’m just going to do this in Javascript if there is not a viable CSS solution.

Related

https://stackoverflow.com/questions/8963183/width-property-is-seemingly-ingored-by-expanding-p-elements

positioning relative to an absolute positioned element – is it possible?

When do nested child elements expand their parent elment?

Answer 1

Further to Kolink’s answer, you could also apply overflow:hidden; to the #i_will_expand element, which should force it to wrap around and contain its child elements. To give:

#i_will_expand { position:relative; top:0px; left:0px; overflow: hidden; }