Why doesn't paragraph background/border flow to same size?

I'm trying to figure out how to make a class of paragraph appear how I would expect it to, rather than how it is displayed in all the browsers I've tested it with. I have a class that applies a background and border to a paragraph, but when this is done and the paragraph is squished between two objects that float on either side, the background and border are laid under the two floated objects, even though the paragraph itself is wrapped correctly.

Is this behavior as it was designed? If so, why, and how would I specify the formatting I'm expecting (that the background appear only underneath the actual paragraph, and the border only at its edges, rather than the full width of its containing block)?

Or is it not possible, and thus something to be brought up in the CSS3 discussions?


page: http://www.pushback.com/terror/mines/SMIL.html

relevant CSS code:

P.note{
font-size: 10pt;
border: 2px dashed red;
background-color: cyan;
width: auto}