Aligning input and radio buttons with label at different places - html

Question

I have this code :
<form action="#" method="get">
<fieldset>
<div>
<label for="profilephoto">Your profile photo</label>
<input type="file" name="profilephoto" id="profilephoto" />
</div>
<div>
<label for="firstname">Your first name</label>
<input type="text" name="firstname" id="firstname" />
</div>
<div>
<label for="lastname">Your last name</label>
<input type="text" name="lastname" id="lastname" />
</div>
<div>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="female" id="female" />
<label for="female">Female</label>
<input type="radio" name="gender" value="male" id="male" />
<label for="male">Male</label>
</div>
<div>
<label for="birthdategroup">Birth Date</label>
<select name="Month">
<option value="none">- Month -</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="Day">
<option value="none">- Day -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="22">30</option>
<option value="29">31</option>
</select>
<select name="year">
<option value="none">- Year -</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
</select>
<p>This is hidden by fault from your profile.</p>
</div>
<div>
<label for="about">About you</label>
<textarea id="about" rows="9" cols="30"></textarea>
</div>
<div>
<label for="websiteaddress">Your website address
</label>
<input type="text" id="websiteaddress" name="websiteaddress" />
</div>
<div>
<label for="websitename">Website name</label>
<input type="text" id="websitename" name="websitename" />
</div>
<div>
<span>preview profile</span> <input type="submit" value="save"/>
</div>
</fieldset>
</form>
And the desired design is this :
http://d.pr/i/WZ0U
The problem is, I tried to align this by adding padding and a width to the labels, but given that the radio buttons have their own label (male and female), it also increase the space between these buttons, which isn't desired.
How can I style this ?
Also, is the use of 3rd label for "gender" really appropriate, since each radio button already has their own label ?

Answer 1

Give the "odd" label a class name and style it separately.
Also, it better form to use a styled unordered list as a container than DIVs.
See: http://www.alistapart.com/articles/prettyaccessibleforms

Answer 2

add classes to the labels, for example if radio boxes labels need different styling then other labels add a specific class to those labels:
<label class="radio">text</label>
<label class="input">text</label>
...
then use the classes in css:
instead of
label {css code}
use
.radio {css code}
and so on so you can give different css to different labels.