css - Float box to the right and let it overlap elements below static elements -

i want add box html page , style in quite uncommon way. fail find right css rules or right search terms. how should like:

this head might    ,----------------------. quite long ,  | box has dynamic | should wrap     | height , width , | next line      | sticks right side |                    |                      | ===================|  |=== === area    ==| longer      |=== === has full     ==| headline , shall   |=== === width ,    ==| overlap things below |=== === below ==`----------------------'=== === box      ============================= ============================================== 

the box displays statistical data , shall have dynamic dimensions (no fixed height/width). how i'd style it:

#box {     float: right;     z-index: 100;     width:  auto; /* default, inserted clarification */     height: auto; } 

the element below headline teaser image full page width. because it's image , box half-transparent it's no problem box overlaps image. expect image area styled this:

#teaser {     background-image: url('...');     width: 100%;  /* clear: both; /* not useful, it? */ } 

i can think of these methods have major drawbacks:

1. give box position: absolute. have used fixed width make headline wrap left of box, otherwise headline text run under box.
2. let box float:right way teaser image begin after box finished.

can think of solution?

without giving thought, let float , apply clear[left|right] - whichever suits needs. depending surrounding rules, may need set clear image, preferably value of [none]. should let image flow , box float without either 1 getting in way of other.