CSS float right issues

Question

I have this problem...I have a paragraph of text, then a button I would like to have float:right and then I have a div that is just a border...like so

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
<div style="float:right;">button</div>
<div class="dotline"></div>

My problem is the order goes text, dotted line and then button when it should be text, button and the dotted line, how do I fix this?

here is the css for the dotline class

.dotline {
    border-top: 1px dotted #B0B0B0;
    height: 1px;
    margin: 10px 0;
}

Answer 1

You can cut the float of button.

You can add clear: both to button

or insert a new cleafix div after button.

Anyway you should stop float of button to get the correct order.

Answer 2

Clear the float:

.dotline {
    border-top: 1px dotted #B0B0B0;
    height: 1px;
    margin: 10px 0;
    clear : both;
}

http://jsfiddle.net/y5pgd/