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

Clear the float:

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

http://jsfiddle.net/y5pgd/