CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bajongskie
Bajongskie

Reputation: 463

CSS float right issue

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

enter image description 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

Upvotes: 4

Views: 1795

Answers (2)

Shinov T
Shinov T

Reputation: 862

give h4 width auto and float left

CSS

h4
{ 
float:left;width:auto
 }

and span float right width auto

.pull-right
{
 float:right;width:auto
}

Upvotes: 0

MrCode
MrCode

Reputation: 64536

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;
}

Upvotes: 7

Related Questions