[SOLVED] Help with lining up HTML form elements

[Darkmatter5]

I have the following code

<label for='firstname'>Name: </label><br>
<span><input type='text' name='firstname' value='$row[mem_firstname]'><br><label for='firstname' style='font-size: 10px; font-weight: normal;'>First</label></span>
<span><input type='text' name='lastname' value='$row[mem_lastname]'><br><label for='lastname' style='font-size: 10px; font-weight: normal;'>Last</label></span>

 

This current code produces something like this.

Name:

"firstname text box"

First "lastname text box"

Last

 

I'm wanting it to be like this.

Name:

"firstname text box" "lastname text box"

First                      Last

 

How might I do this?

[rhodesa]

<label for='firstname'>Name: </label><br>
<div style='float:left;'>
  <input type='text' name='firstname' value='$row[mem_firstname]'><br>
  <label for='firstname' style='font-size: 10px; font-weight: normal;'>First</label>
</div>
<div style='float:left;'>
  <input type='text' name='lastname' value='$row[mem_lastname]'><br>
  <label for='lastname' style='font-size: 10px; font-weight: normal;'>Last</label>
</div>
<div style="clear:left;"></div>

[Darkmatter5]

Okay that worked, but now surprisingly Firefox is giving me a problem that IE isn't.  Here's my code and attached is a screen shot of each browser rendering.  I HATE to say this, but I would like for Firefox to render like IE.

 

<label for='username'>Username:</label>
<div><input type='text' name='username' value='$row[mem_username]'></div><p>
<label for='firstname'>Name:</label>
<div style='float: left;'>
  <input type='text' name='firstname' value='$row[mem_firstname]'><br>
  <label for='firstname' style='font-size: 10px; font-weight: normal;'>First</label>
</div>
<div style='float: left;'>
  <input type='text' name='lastname' value='$row[mem_lastname]'><br>
  <label for='lastname' style='font-size: 10px; font-weight: normal;'>Last</label>
</div>
<div style='clear: left;'></div><p>
<label for='email'>Email:</label>
<div><input type='text' name='email' value='$row[mem_email]'></div><p>
<label for='theme'>Prefered page theme:</label>
<div><input type='text' name='theme'></div><p>
<label for='zipcode'>Zipcode:</label>
<div><input type='text' name='zipcode' value='$row[zipcode]'></div>

 

Notice the distance between labels and the divs below in Firefox. I don't want that distance.

 

[attachment deleted by admin]

[rhodesa]

<div style='margin-bottom: 10px;'>
  <label for='username'>Username:</label>
  <div><input type='text' name='username' value=''></div>
</div>
<div style='margin-bottom: 10px;'>
  <label for='firstname'>Name:</label><br />
  <div style='float: left;'>
    <input type='text' name='firstname' value=''><br>
    <label for='firstname' style='font-size: 10px; font-weight: normal;'>First</label>
  </div>
  <div style='float: left;'>
    <input type='text' name='lastname' value=''><br>
    <label for='lastname' style='font-size: 10px; font-weight: normal;'>Last</label>
  </div>
  <div style='clear: left;'></div>
</div>
<div style='margin-bottom: 10px;'>
  <label for='email'>Email:</label><br />
  <input type='text' name='email' value=''>
</div>
<div style='margin-bottom: 10px;'>
  <label for='theme'>Prefered page theme:</label><br />
  <input type='text' name='theme'>
</div>
<div style='margin-bottom: 10px;'>
  <label for='zipcode'>Zipcode:</label><br />
  <input type='text' name='zipcode' value=''>
</div>