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