如何使文本环绕重叠的div标签

Question

This is what I have so far: http://imgur.com/gucAcBM

I want the text to wrap around the sidesideheading and sideside elements that overlap the side element instead of going under it.

HTML:

<div>
    <div>
        Text Text Text Text Text Text Text Text Text Text Text Text Text
    </div>
    <br>
    <div id="sidesideheading">
    </div>
    <div id="sideside">
    </div>
</div>

Answer 1

You will not be able to float the text around the fixed position element. Fixed or absolute positioning will take the element out of it's natural flow and the text can not detect where to wrap around.

You have to come up with another solution if you want pure css or use Javascript to position the element inside the wrapper as a user scrolls the page, which is not ultimately the best solution. You could also just set padding or margin on the right side of pside div and forget about wrapping text - this will lead the text to not wrap around the aside element but neither will the text go under it.

One more note. You should not have multiple divs with the same id on the same page. Use classes instead.

HTML:

<div class="pside"></div>

CSS:

.pside {
  // What ever css declarations here
}

Answer 2

You cannot assign, same id to multiple elements. But now quick fix is

#pside{
    padding-right:16%;
}