Alignment of plain simple buttons in CSS

Question

I 've got this simple HTML snippet (form) taken from a book:

<form action="example.php" method="post">
<div>
    <label for="name" class="title">Name:</label>
    <input type="text" id="name" name="name" />
</div>
<div>
    <label for="email" class="title">Email:</label>
    <input type="email" id="email" name="email" />
</div>
<div>
    <span class="title">Gender:</span>
    <input type="radio" name="gender" id="male" value="M" />
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female" value="F" />
    <label for="female">Female</label> <br/>
</div>
<div>
    <input type="submit" value="Register" id="submit" />
</div>

Then I couple it with the following CSS code:

div {
    border-bottom: 2px solid #efefef;
    margin: 10px;
    padding-bottom: 10px;
    width: 260px;
}

.title {
    float: left;
    width: 100px;
    text-align: right;
    padding-right: 10px;
}

#submit {
    text-align: right;
    color: red;
}

The problem is that I can't align the 'Register' button found on the bottom of the form. What am I missing here?

Thanks in advance.

Answer 1

Fix: http://jsfiddle.net/FerF7/

What you have in your #submit class is a text-align that is aligning the text WITHIN the button itself, not aligning the button within the div.

Simply add text-align: right to your div class and you will be aligning within the div like so:

div {
    border-bottom: 2px solid #efefef;
    margin: 10px;
    padding-bottom: 10px;
    width: 260px;
    text-align:right;
}

Answer 2

You must align the parent container as opposed to aligning the text of the button itself. Change your HTML and CSS as follows:

CSS

.submit-button {
    text-align: right;
}

HTML

<div class="submit-button">
    <input type="submit" value="Register" id="submit" />
</div>

Answer 3

Doing a text-align on the input itself will simply align the text inside the button, which you can see if you add, e.g. width:100px to the button css.

Most likely what you want is to assign an id to the parent div and text-align:right that.

#submit_div {
    text-align:right;
}

<div id="submit_div">
    <input type="submit" value="Register" id="submit" />
</div>