twitter bootstrap block level form

Question

I am trying to get full width Login form. Basically, the input fields for the user name, password and the button all should be of the same length. now I can get this using spans easily, the trouble is when I have an icon "prepended" to the username and password, the input fields stretch beyond the spans (if I apply input-block-level to the inputs) and the button spans only to the outer span coming up short (if I try btn-block). How do I get all the elements to stretch only up to the containing span width?

Here is my fiddle.

http://jsfiddle.net/sujesharukil/EP83X/21/

Answer 1

You can use display: table and display: table-cell to get the inputs to fill the remaining space in the spans correctly or use fluid widths. Here's a fiddle for the first approach:

http://jsfiddle.net/EP83X/22/

Or use width: 90.666% on the inputs based on the fixed icon width (28px) and the width of the spans ((300-28) / 300 * 100).