Webmaster Forum / HTML, CSS, Scripts / CSS / January 2008

Hello,

let's say I have this simple HTML form:

<form method="post" action="foo.php">
    <p>
        <label for="username">Username:</label>
        <input type="text" name="username" />
    </p>
    <p>
        <label for="password1">Password:</label>
        <input type="password" name="password1" />
    </p>
    <p>
        <label for="password2">Password again:</label>
        <input type="password" name="password2" />
    </p>
    <p>
        <label for="email">E-Mail:</label>
        <input type="text" name="email" />
    </p>
    <p>
        <input type="submit" name="register" value="Register" />
    </p>
</form>

I want all the <label>s to have the same width, so the labels and
inputs line up nicely.
For exmaple: label { width: 200px; }.

Now I want all the <input>s to fit the rest of the width of the
browser window. So if you resize the window, the input fields fill out
the space between the "right border of the <label>" and the "right
border of the browser window" automatically. You could say: <label> +
<input> = 100% of the window's width.

I'm hoping for a solution completely in CSS, I hope you guys
understand my problem and can help me.

Thanks in advance!