Menu
I have a unique situation here.
Essentially, I have an absolutely positioned block of text, which must be absolutely positioned due to design limitations.
I also have the rest of my text, which is normally positioned. However, I need to prevent my normal text from overlapping with my original text.
Is this possible simply with HTML and inline CSS? I do not have access to JavaScript or external/head-related CSS; only inline styles are available. I have created a simplified version of my CSS with this jsFiddle.
247
By setting absolute position you're removing the element from the document flow, but the behaviour you want is that your element should be be pushed around by its siblings so as not to overlap... ie it should flow!
Absolutely positioned elements are removed entirely from the document flow. That means they have no effect at all on their parent element or on the elements that occur after them in the source code.
Remove the width from your #inner div and set a margin on the right of it that is the full width ( margin + padding + width + etc. ) of your figure . The figure will float into the right margin of #inner . Since DIVs are block level elements they take up 100% width by default.
Is a solution to create another div (div2) that overlaps the absolutely positioned div (div1), but is itself invisible? Then the rest of the text would avoid overlapping div2...
Sketched this out here: http://jsfiddle.net/VKYwD/8/
Not entirely clear on what your constraints are though.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
