OK, I'm asking as a last-ditch effort to comply with my conscience and do this with CSS. I want to layout this simple form using CSS, but I've spent two hours trying to get it and always end up with alignment issues. I did it in ten minutes using tables. Meh.
I need labels right-justified, the name row split in two, the labels properly vertically aligned with the input text, and all the right edges of the inputs to line up. What does it take to do this in CSS?!?
EDIT: Adding my CSS to see where I'm going wrong.
Here's as far as I got with the CSS:
.form_row {
width: 500px;
}
.form_row label {
text-align: right;
width: 150px;
float: left;
margin-top: 6px;
padding-right: 6px;
}
#id_first_name, #id_last_name {
width: 130px;
}
#id_email, #id_password {
width: 300px;
}
The Markup:
<div class="form_row">
<label for="id_first_name">Name:</label>
<input id="id_first_name" type="text" name="first_name" />
<input id="id_first_name" type="text" name="last_name" />
</div>
<div class="form_row">
<label for="id_email">Email:</label>
<input type="text" name="email" id="id_email"/>
</div>
<div class="form_row">
<label for="id_password">Password:</label>
<input id="id_password" type="password" name="password" />
</div>
And the result:
