How to align labels with textfields for all the major browsers

HTML & CSS
1

I’m trying to align these labels with input fields and select fields, how can i do this so it display’s correctly in all the major browsers…

some of the browsers the labels isn’t aligned?

here is my code…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

<style type="text/css">
div#settings_update_basics {
width: 420px;
height: 160px;
margin-top: 5px;
margin-left: 5px;
border: 1px solid green;
}

div#settings_basics_left {
float: left;
width: 80px;
height: 155px;
font-size: 8pt;
font-family: "arial";
font-weight: bold;
text-align: right;
border: 1px solid green;
}

div#settings_basics_right {
float: right;
width: 300px;
height: 155px;
margin-right: 15px;
text-align: left;
border: 1px solid green;
}

.settings_labels {
width: 80px;
height: 16px;
text-align: right;
border: 1px solid red;
}

.settings_input {
width: 300px;
height: 16px;
text-align: left;
border: 1px solid gray;
}

</style>
</head>
<body>
  <div id="settings_update_basics">

    <div id="settings_basics_left">
      <div class="settings_labels">First Name:</div>
      <div class="settings_labels">Last Name:</div>
      <div class="settings_labels">Gender:</div>
    </div>

    <div id="settings_basics_right">
      <div class="settings_input">
        <input type="text" id="first_name" name="first_name" style="font-size: 7pt; height: 15px;">
      </div>
      <div class="settings_input">
        <input type="text" id="last_name" name="last_name" style="font-size: 7pt; height: 15px;">
      </div>
      <div class="settings_input">
        <select id="gender" style="font-size: 7pt; height=: 15px">
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
      </div>
    </div>

  </div>
</body>
</html>
2

If you are submitting the data you need to put it in a form then you can use <label>s next to your input boxes


form#contactForm label {
	width: 116px;
	display: block;
	float: left;
	text-align: left;
	font: bold 10pt Arial, Verdana, Times, sans-serif;
	padding-right: 5px;
}

form#contactForm input, form#contactForm textarea {
	border: 1px solid #666;
	width: 230px;
	padding: 2px;
}

form#contactForm textarea {	
   color: #000;
   font: normal 9pt Verdana, arial, sans-serif;
}

<form method="post" id="contactForm" action="sendmail.htm">
	<p><label for="sendername">Name:</label>
	<input type="text" title="Please enter your name" id="sendername" name="sendername" size="28" value="" /></p>

	<p class="hint">Please enter a valid email address for yourself.</p>
	<p><label for="senderemail">Email:</label>
	<input type="text" title="Please enter your email address" id="senderemail" name="senderemail" size="28" value=""  /></p>
	
	<p class="hint">Please enter a subject.</p>
	<p><label for="subject">Subject:</label>
	<input type="text" title="Please enter a subject" id="subject" name="subject" size="28" value=""  /></p>
	
	<p class="hint">Please enter your message.</p>
	<p><label for="message">Message:</label>
	<textarea title="Please enter your message" id="message" name="message" rows="15" cols="45"></textarea></p>
	<p><label for="submit">&nbsp;</label>
	<input type="submit" name="submit" id="submit" value="Send" /></p>
</form>
3

Just be aware those p.hints will not be read out in a screen reader in Forms mode.