aligning a div to the right when the inside elements have float left

Question

I came across this pretty cool wizard menu, but I can't figure out how to align the div to the right.

http://www.emirplicanic.com/css/css-step-by-step-menu-wizard-style

<div class="wizard-steps">
  <div class="completed-step"><a href="#step-one"><span>1</span> Account Info</a></div>
  <div class="active-step"><a href="#step-two"><span>2</span> Contact Info</a></div>
  <div><a href="#"><span>3</span> Security Question</a></div>
  <div><a href="#"><span>4</span> Confirmation</a></div>
</div>

I'm guessing that is because of the float: left that is set on the inside elements.

I would appreciate some help.

Thanks, Paul

Answer 1

or you can fix it as:

.cont{
    position: absolute;
    width: 550px;
    right: 0px;
}

then put your wizard-steps inside:

<div class="cont">
    <div class="wizard-steps">...</div>
</div>

---

edit then:

.cont{
    position: absolute;
    right: 0px;
}

then change:

.wizard-steps div {
    display: inline-block;
    position:relative;
}

Answer 2

You would need to give it a width. Without an explicit width, it has a width of 100% of its container. No matter how you align it, the float on the elements are going to stick to the left-hand side of .wizard-steps. So make it less than 100% wide, stick it to the right and they will appear at the new left edge.

Be aware of all the position: relative going on in there as well.