Adding space between form columns

Anonymous
Not applicable

Adding space between form columns

I have a 2-column registration form, and am trying to add some space between the two columns. It's a little too tight. Is there css to accomplish this?

Thanks!
Tags (1)
2 REPLIES 2
Anonymous
Not applicable

Re: Adding space between form columns

<form>
<label for="txtName">Name</label>
<input id"txtName" type="text">
<label for="txtEmail">Email</label>
<input id"txtEmail" type="text">
<label for="txtAddress">Address</label>
<input id"txtAddress" type="text">
...
<input type="submit" value="Submit The Form">
</form>

And the css will be:

form{
float:left; /*to clear the floats of inner elements,usefull if you wanna add a border or background image*/
width:300px;
}
label{
float:left;
width:150px;
margin-bottom:10px; /*or whatever you want the spacing to be*/
}
input{
float:left;
width:150px;
margin-bottom:10px; /*or whatever you want the spacing to be*/
}

might work.
Anonymous
Not applicable

Re: Adding space between form columns

Thanks Ben, I was actually trying to increase space between 2 columns. So for example, I had on one row of a form "First Name" + field, then to the right of it "Last Name" + field. I wanted to add space between the first name label + field and the last name label + field. I figured out a workaround: if you click the little "edit" pencil next to the form field label, you can go in and modify the html behind that label. I was able to put in a few nonbreaking spaces at the beginning of the code behind the "last name" label and all other labels in that righthand column of my form, and that moved everything over to the right a bit. There might be a better way to do it, but that's the way this designer came up with 🙂