CSS float right issue

Question

I am into designing my page and I've got troubled aligning the header. As you can see here:

I wanted the "Add" will align with the employee list. How would I do that?

By the way here's the html code: I've used bootstrap. But a native css suggestion is still good.

    <div class="title">
                <h4>Employee list</h4> 
                <span class="pull-right">Add</span>
            </div>

Thanks

Answer 1

Move the Add to before the <h4>. When you float right, the target element should be before the other element if you want them to align.

Demo

HTML

<div class="title">
     <span class="pull-right">Add</span>
     <h4>Employee list</h4> 
</div>

CSS

.pull-right {
    float:right;
}