This page provides examples showing a problem I'm having coding a division such that  no white space occurs between it and the text below it.

My intent is to define a division which I can place anywhere on a page and have it float to the right. The 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.

Example 1:

This first example has the height set to just what is needed (18px) to avoid  white space between the bottom of the division and the text below. However, the button's height is greater than the div.

The coding for this first example (reformatted for clarity) is:

<div  style="border: 1px solid red; background-color: rgb(255, 255, 204); width: 260px; float: right;">
<input style="float: right;" name="expand1" value="expand" type="button">
Nulla sagittis
</div>

Example 2:

In this second example, the height of the division  has not been set. As you can see, the button "fits" in the division but there is additional white space between the bottom of the box and the next line of text. I have tried both display: inline; and display: block with no change in the results.

 The coding for the second example is:

<div  style="border: 1px solid red; background-color: rgb(255, 255, 204); width: 260px; float: right;">
<input  style="float: right;" name="expand1" value="expand" type="button">
Nulla sagittis
</div>
<br>


It makes no difference where the boxes are coded , in these examples they are coded after a <br>. I can put the division in a line of text and the same problem occurs.

Any thoughts?