Eliminating white space under a division floated to the right

Question

I'm trying to eliminate white space below a division which I am floating to the right.

My intent is to define a division which I can place anywhere on a page and have it float to the right. A button will expand the division - increase it's height and width - to allow the division to be read. I've left out all of that processing to simplify the examples.

I've got it floating right - - it was simple to do, just code float: right; using CSS. The problem is that if I do not specify a height for the division, I get extra white space below the division. If I set the height so that there is no white space under the division, the button extends below the division's border.

Go to http://www.bobnovell.com/sideboxproblem.html for a page with examples.

Bob

Answer 1

You got the space, because the div with floating right is more height than one line of text. So it takes two lines.

If the div should stay on his on line, wrap the text in a new div and set clear=both on it.

Here is an example: http://jsbin.com/hujax/1/

Update follow the conversation in comments:

If you do not want change the markup, you could use position:ablsolute on your div and position it with top:1em (or what ever you want) and right:0. Also the container of the text and headline need the style: position:relative.

here is and example: http://jsbin.com/hujax/4/

update

with negative margin-bottom you can reduce the needed height of your div.

http://jsbin.com/hujax/3/