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