CSS Tableless Forms

[nsath]

This is style I've created with the intention of positioning in the following layout with the widths below:

label1 inputtextbox1 label2 inputtextbox2
200px 260px 200px 260px

Style follows:

<style type="text/css">
#mainFormContainer{left:2px; top:388px; position:relative; height:424px; width:920px;}
label#fname{left:0px; top:90px; position:absolute; font-weight:400; text-align:center; width:200px;}
input, textarea#firstname{left:200px; top:90px; position:absolute; width:260px;}
label#sname{left:460px; top:90px; position:absolute; font-weight:400; text-align:center; width:200px;}
</style>

label1, input textbox1 and label2 so far are perfectly positioned exactly how I want it to be, but when I created the style for input textbox2, it moves the position of input textbox1

style used for input textbox2 being:

input, textarea#surname{left:660px; top:90px; position:relative; width:260px;}

They've even got id's to differentiate between input textbox1 and input textbox2so why is it repositioning input textbox1?
Any ideas? solutions, corrections of styles much appreciated

[holyhttp]

You really do not need to use the positioning.

form {
width:920px;
height:auto;
padding:0;
margin:10px;
overflow:hidden;
}

form p{
float:none;
clear:both;
margin:0.5em 0;
padding:0;
}

form label{
width:200px;
height:auto;
text-align:right:
margin:0 5px 5px 0;
padding:0 0 5px;
float:left;
clear:left;
}

form input{
width:200px;
height:18px;
float:left;
clear:none;
}

/* class for submit button */
form input.btn{
width:70px;
height:35px;
margin:5px 0 0;
padding:0 10px;
line-height:32px;
text-align:center;
}

if you are using check boxes and radio buttons you can define the following CSS classes

form input.checkbox, form input.radio{
width:15px;
height:15px;
float:left;
clear:none;
margin:5px 10px 0 0;
padding:0;
}

It's best to create an external form.css stylesheet will all the above styles you can reuse in pretty much all your web design projects.
If you want to position the label above its corresponding field, then you can just add the following CSS rules:
clear:both;
text-align:left; /* to flush the text label to the left */

You could also choose to not float both label and field.
In that case just use the following CSS rule:
float:none;

You can wrap each label & field in a <p>...</p>