CSS float: right; not working

Question

<div id="left-aligh">
    <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Registered With</a></li>
        <li><a href="#">Social</a></li>
        <li style="float: right;"><a class="active" href="#">Regsiter</a></li>
    </ul>
</div>

All the menu items have been pushed to left using this code below

#left-aligh {
    float: left;
    position: relative;
    bottom: 300px;
}

but I want to push the register alone to the right for the float option is not working. I have tried to declare inside <li> itself but it's not working, kindly help.

Answer 1

When your use float:right; on an element, it moves to right of the parent, NOT to the right of page. In above case it indeed moved to the right of parent, it looked like it didn't worked as expected cause parent, i.e UL element has that much width only.

Note that by default UL is not a block level element, thus it wont span over entire available lenght but exapand according to it's children, also you used float left on parent of UL, which cause it to float to left, floated elements, whether block level or not, do not occupy entire length, instead exand as per its children same an inline-block elements!

Remove float from wrapper div & make UL block level, then your float:right will work as expected!

As follow:

HTML

<div id="left-align">
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Registered With</a></li>
    <li><a href="#">Social</a></li>
    <li style="float: right;"><a class="active" href="#">Regsiter</a></li>
  </ul>
</div>

CSS

#left-align {
    /* Remove float */
    position: relative;
    bottom: 300px;
}

ul {
    display:block;
    padding:0;
}

#page-wrap-header {
     /* removed width */
     margin: 0 auto;
     text-align: left;
}

Due to width on #page-wrap-header it was going outside window bounds, thus I removed it. you can tweak it later as per your need.

See DEMO : jsFiddle link