How To Properly Space A Contact Form In A Table? - html

Question

I'm trying to properly add spacing between the s in my table contact form here: http://jsfiddle.net/k6XSp/1/.
I would like to have the fields on the right to line up with the width of the message box on the right side, thus meaning I need space added in between the s in each of the two s.
It is looking good, but I can't figure out how to space the right sides of the fields. Adding a margin-right seems to do the trick, but not very well, as it is very glitchy.
In addition, the form moves around when you click on the filed because the border shows up.
The CSS for the text fields looks like this:
#contact-area input, #contact-area textarea {
padding: 5px;
width: 451px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: none;
background-color: #dedede;
height: 40px;
}

Answer 1

Take a look at this fiddle http://jsfiddle.net/k6XSp/6/. As suggested, try not to use tables to position elements. Use css instead.
<div class="control-group">
<label for="FirstName" class="text">First Name:</label>
<div class="control">
<input type="text" name="FirstName" id="FirstName" />
</div>
</div>
.control-group {width: auto; float: left; margin: 0 10px 0 0}
.control {display: block; clear: both;}

Answer 2

Forms use fieldset, legend and label tags, not tables, unless you need to code HTML from the 90's. The idea is to be semantically correct e.g. your HTML should reflect it's meaning/purpose.
<form action="contactengine.php" method="POST">
<fieldset>
<legend>personal data</legend>
<label for="firstname">First name</label>
<input id="firstname" placeholder="First name" />
</fieldset>
<input type="submit" value="submit my form" />
</form>
Spacing these fields is part of your markup => CSS.
See fiddle for a responsive/liquid (desktop, tablet, mobile) approach.
Note:
I see you use the 62.5% font base approach. We've tested with this on a big project and noticed IE has a floating point issue ending up with a different font-base than 10px. In my opinion just put it to 10px and be done with it => rem values can now be used in modern browsers.