Finding the position of content instead of the element

Question

I have an article of elements, showing the styling of all the different types.

When you mouse over each element, a button shows up that is actionable by the user. This works fine, until I added in a floated image.

Because of the way floats work, the original element still reaches the edge of the wrapper, but the content starts after the floated image.

I need to find a way to get the position of the content of an element instead of the actual element itself.

A quick screen shot of what I'm talking about.

---

---

Edit: Adding code example - http://jsfiddle.net/h5P2e/1/embedded/result/

This code example doesn't have some of the cleanup functions I have locally, so the green button will show up on occasion in internal inline elements. The concern I have is the green button showing up on top of the image, when it should be near the paragraph content.

Answer 1

One option you have is you can add overflow:auto to the p and ul tags in your content area. This will start a new block formatting context, but it's not without disadvantages too. There is the risk of scrollbars appearing if you have a child element that has too much margin or uses positioning, and floats won't work quite the same either. The result of this method is that the edge of your elements is moved outside of the area covered by the image.

Demo and source