CSS Form Styling #2

Question

I have seen forms that can do this without using <br /> etc.

Here's my form:

<form id="staff-login" name="staff-login" action="/staff/login/" method="POST">
    <label for="staff-login-email">Email</label>
    <input type="text" id="staff-login-email" name="email" value="" />
    <label for="staff-login-address">Password</label>
    <input type="password" id="staff-login-password" name="password" value="" />
    <input type="submit" id="staff-login-submit" name="submit" value="Login" />
</form>

And an example of what I'm taking about: http://img694.imageshack.us/img694/4879/43201622.gif

All the examples I can Google insert extra <div>s and mess with the code, I'm wondering if there is a way with the code I have (or if you can structure my code "better") to achieve what I need?

Answer 1

using css, float your label to the left. Also, make your input elements blocks with a decent margin...

label { float: left; width: 200px; }
input { margin-left: 220px; display: block; }
input.staff-login-submit { margin-left: 500px }

I've just guessed at a few numbers for the margins, so tweak as needed.

Answer 2

<label> and <input> are inline elements. Either you use <br /> (which is totally ok) or you specify them as block elements via CSS.

You can learn more about inline and block elements.