Text wraps around floating div but borders and s do not

Question

I have a div that is float: right and it is inside a parent div. There are p elements inside that same parent div also, and the text wraps around t

Answer 1

Check out the fiddle...

http://jsfiddle.net/UnsungHero97/8BwGB/3/

What I did here was give the floated element a z-index CSS property, which will put it "above" the non floated element (which has a smaller valued z-index) and the

---

will not go above the floated element.

In regards to getting it as wide as the text, in my example it is as wide as the text, but I'm not sure if that holds across browsers (I'm on Chrome). Let me know if it doesn't.

I hope this helps.
Hristo

p.s. excellent mspaint skillz :)