lining up input boxes

[Silver-0-surfer]

Hi.

I am amazingly unskilled with html, so I was hoping you guys can help me out.

I have like 5 or so input boxes with the name of the box on the left. like:

username <input box>
password <input box>
...

how can I make it so that the actual input boxes are neatly below each other. It so frustrating

I tried to do this

<input style="margin-left : 25px;"

and that worked...ONLY ON MY FIREFOX in linux, ever other broweser on windows messes it up. Can someone help me out, either some instructions or a link or something would be awesome..

Thanks

 

[Silver-0-surfer]

I swear like everytime I ask a question, I find an answer a few seconds later..Sorry.

So I put them inside of a table. Is this how you guys do it?

 

[cybershark]

I normally do something like this:

form {
/*margin and/or padding maybe required depending on your layout*/
}
form p {
	clear: left;
	margin: 0;
	padding: 0;
	padding-top: 5px;
}
form p label {
	float: left;
	width: 30%; /*adjust according to your page width */
	}

<p><label>Username</label><input name="username" type="text"></p>
<p><label>Password</label><input name="password" type="password"></p>

 

[dabouncer]

<table>
<tr><td>Username</td><td><input type=text></td></tr>
<tr><td>Password</td><td><input type=text></td></tr>
</table>

 

[FarligOpptreden]

I normally do something like this:

form {
/*margin and/or padding maybe required depending on your layout*/
}
form p {
	clear: left;
	margin: 0;
	padding: 0;
	padding-top: 5px;
}
form p label {
	float: left;
	width: 30%; /*adjust according to your page width */
	}

<p><label>Username</label><input name="username" type="text"></p>
<p><label>Password</label><input name="password" type="password"></p>

Good answer, but why wrap the paragraph around the label and input if you're already floating left and clearing the label left as well? Are you doing it purely for semantic purposes?

@OP: Try wrapping it all in a fieldset with a proper legend as well, that way it would make semantic sense... Try straying from the table-based solution though.

 

[Raithlin]

I swear like everytime I ask a question, I find an answer a few seconds later..Sorry.

So I put them inside of a table. Is this how you guys do it?

<table>
<tr><td>Username</td><td><input type=text></td></tr>
<tr><td>Password</td><td><input type=text></td></tr>
</table>

Oh, no. Seriously, take it away!!

As above, use CSS. There are plenty of examples out there.

 

[cybershark]

Good answer, but why wrap the paragraph around the label and input if you're already floating left and clearing the label left as well? Are you doing it purely for semantic purposes?

I used paragraph tags to make each label and input go on its own line. You don't have to use paragraph tags, you can give the form or another element a width sufficient to make each label and input go on its own line.

 

[FarligOpptreden]

I used paragraph tags to make each label and input go on its own line. You don't have to use paragraph tags, you can give the form or another element a width sufficient to make each label and input go on its own line.

Again, the "float left, clear left" rule achieves the "new-linedness" already. A good trick for clearing a container element (to keep the auto height of the container) is to set the overflow of the container element to "auto".

 

[Raithlin]

Bear in mind that overflow:auto used in IE<7 needs a width or something that triggers the hasLayout property for that element.

http://css-tricks.com/the-css-overflow-property/
http://www.quirksmode.org/css/clearing.html

 

[FarligOpptreden]

Bear in mind that overflow:auto used in IE<7 needs a width or something that triggers the hasLayout property for that element.

http://css-tricks.com/the-css-overflow-property/
http://www.quirksmode.org/css/clearing.html

Yes yes, but usually a container element (like a DIV) would have a set width, if you're dead-set on designing the page properly...

 

[Raithlin]

Yes yes, but usually a container element (like a DIV) would have a set width, if you're dead-set on designing the page properly...

Not necessarily, hey. I don't set widths on absolutely every element, and not even every div. Normal sites should be covered though.