Floating elements in form

[cs.punk]

Can anyone tell me why the floated input fields have a space after the first when I set the fieldset to 350px, yet at 400px it's ok?

 

css

label.login {
    color: #CCCCCC;
    font-size: 16px;
    padding-left: 20px;
    font-family: "DejaVu Sans", "Arial";
}

input.login {
    text-align: center;
    clear: right;
    float: right;
}

input.button {
    margin-top: 20px;
    margin-left: 20px;
}

fieldset.login {
    width: 400px;
    margin: 10px;
}

 

        <fieldset class='login'>
            <form action='' method='post'>
            
                <label class='login' for='user'>Username:</label>
                <input class='login' name='user' id='user' type='text'/>
                <br />
                
                <label class='login' for='password'>Password:</label>
                <input class='login' name='password' id='password' type='text'/>
                <br />

                <label class='login' for='bob'>Bob:</label>
                <input class='login' name='bob' id='bob' type='text'/>
                <br />
                
                <input class='button' name='submit' value='Login' type='submit'/>
            </form>
        </fieldset>

 

[attachment deleted by admin]

[sunfighter]

I can't answer that. I could have something to do with font size - leading - etc. In my editor they both have a space.

Anyway, I would suggest you use divs to position things when using labels and inputs. I used tables to position them before divs.

label.login {
    color: #000;
float:right;
    font-size: 16px;
    padding-left: 20px;
    font-family: "DejaVu Sans", "Arial";
}

input.box{
float:right;
}

fieldset.login {
    width: 300px;
height: 85px;
    margin: 10px;
}

 

and

 

<fieldset class='login'>
    <form action='' method='post'>

<div style="width:130px; float:left;;">
	<label class='login' for='user'>Username:</label>
	<label class='login' for='password'>Password:</label>
        <label class='login' for='bob'>Bob:</label>
</div>

<div style="width:130px; float:right;;">
	<input class='box' name='user' id='user' type='text'/>
        <input class='box' name='password' id='password' type='text'/>
        <input class='box' name='bob' id='bob' type='text'/>
</div>

<div style="clear: both;"><input name='submit' value='Login' type='submit'/></div>


    </form>
</fieldset>

[cssfreakie]

hmm,

 

maybe try something like this:

 

input{
   clear:both;
}

 

Problem is is that the text has a different height than the input box, by using clear both it will push the other floats on the other line.

Why are you using separate div's by the way? An unordered(nested) list is ideal for this (just do list-style:none;)

 

as far as the code just above me if you use it, be careful for the double semicolons. I saw at least 3 of them.

[cs.punk]

Thanks guys I'll give it a shot tomorrow =).

[cssfreakie]

if the clear:both doesn't work for you, you could also set the height of line-height to the same size of the input element. (assuming you use a <ul>-list  (which i would use)

But clear:both should work in your case.

so in case

 

input{

  height:1.5em;

}

ul{

  line-height:1.5em;

}

 

Anytime you use float and for some reason elements are aligned just a few pixels under each other in a diagonal way, clear is the solution.