chrisfixit
asked on
Floating radio buttons
I want the radio buttons in my form to be horizontally aligned, but the buttons drop out and appear below the "Male:" and "Female:" labels. So I get
Male: Female: rather than Male: o Female: o
o o
CSS...
label,input,textarea {
display: block;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 250px;
padding-right: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #FFFFFF;
}
label.sex {
width: 40px;
}
Markup..
<form ..etc..
<label>Sex:</label>
<label class="sex">Male:<input name="sex" type="radio" value="male" checked /></label>
<label class="sex">Female:<input name="sex" type="radio" value="female" /></label><br>
...\form>
Male: Female: rather than Male: o Female: o
o o
CSS...
label,input,textarea {
display: block;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 250px;
padding-right: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #FFFFFF;
}
label.sex {
width: 40px;
}
Markup..
<form ..etc..
<label>Sex:</label>
<label class="sex">Male:<input name="sex" type="radio" value="male" checked /></label>
<label class="sex">Female:<input name="sex" type="radio" value="female" /></label><br>
...\form>
ASKER
Thanks, but it plays havoc with the rest of the form..
<label for="Name">Name:</label>
<input class="name" name="name" type="text" id="name" size="35" maxlength="50"
onchange="validatePresent( this, 'inf_name');">
<div class='info' id="inf_name">*</div>
<br />
<label for="Town">Town:</label>
<input class="name" name="town" type="text" id="town" size="35" maxlength="50"
onchange="validatePresent( this, 'inf_town', true);">
<div class='info' id="inf_town">*</div>
<br />
<label for="County">County/State/ Region:</l abel>
<input class="name" name="county" type="text" id="county" size="35" maxlength="50"
onchange="validatePresent( this, 'inf_county', true);">
<div class='info' id="inf_county">*</div>
<br />
<label for="Country">Country:</la bel>
<select name="country" size="1" id="country">
<option selected>United Kingdom</option>
<option value="Afghanistan">Afghan istan</opt ion>
<option value="Albania">Albania</o ption>
<option value="Algeria">Algeria</o ption>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</o ption>
<option value="Angola">Angola</opt ion>
<option value="Anguilla">Anguilla< /option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentin a</option>
<option value="Armenia">Armenia</o ption>
</select>
<br>
<label for="Email2">Email Address:</label>
<input class="email" name="email1" type="text" id="email1" size="35" maxlength="50"
onchange="validateEmail(th is, 'inf_email1', true);">
<div class='info' id="inf_email1">*</div>
<br />
<label for="Email2">Re-Enter Email:</label>
<input class="email" name="email2" type="text" id="email2" size="35" maxlength="50"
onchange="validateEmail(th is, 'inf_email2', true);">
<div class='info' id="inf_email2">*</div>
<br />
<br>
<label for="Date of Birth">Date of Birth:</label>
<script>DateInput('dob', true, 'DD-MON-YYYY')</script>
<br class="date">
<label>Sex:</label>
<label class="sex">Male:<input name="sex" type="radio" value="male" checked /></label>
<label class="sex">Female:<input name="sex" type="radio" value="female" /></label><br>
<label for="Time">Time of Birth:</label>
<label class="selectm" for="Hour">Hour:</label>
<select name="hour" size="1" id="hour">
<option value="12" selected>12</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>
<label class="selectm" for="Minute">Minute:</labe l>
<select name="min" size="1" id="min">
<option selected>00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
<br>
<input class='brk' type="submit" name="submit" value="Continue">
<input class='brk' type="reset" value="Clear Form">
<label for="Name">Name:</label>
<input class="name" name="name" type="text" id="name" size="35" maxlength="50"
onchange="validatePresent(
<div class='info' id="inf_name">*</div>
<br />
<label for="Town">Town:</label>
<input class="name" name="town" type="text" id="town" size="35" maxlength="50"
onchange="validatePresent(
<div class='info' id="inf_town">*</div>
<br />
<label for="County">County/State/
<input class="name" name="county" type="text" id="county" size="35" maxlength="50"
onchange="validatePresent(
<div class='info' id="inf_county">*</div>
<br />
<label for="Country">Country:</la
<select name="country" size="1" id="country">
<option selected>United Kingdom</option>
<option value="Afghanistan">Afghan
<option value="Albania">Albania</o
<option value="Algeria">Algeria</o
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</o
<option value="Angola">Angola</opt
<option value="Anguilla">Anguilla<
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentin
<option value="Armenia">Armenia</o
</select>
<br>
<label for="Email2">Email Address:</label>
<input class="email" name="email1" type="text" id="email1" size="35" maxlength="50"
onchange="validateEmail(th
<div class='info' id="inf_email1">*</div>
<br />
<label for="Email2">Re-Enter Email:</label>
<input class="email" name="email2" type="text" id="email2" size="35" maxlength="50"
onchange="validateEmail(th
<div class='info' id="inf_email2">*</div>
<br />
<br>
<label for="Date of Birth">Date of Birth:</label>
<script>DateInput('dob', true, 'DD-MON-YYYY')</script>
<br class="date">
<label>Sex:</label>
<label class="sex">Male:<input name="sex" type="radio" value="male" checked /></label>
<label class="sex">Female:<input name="sex" type="radio" value="female" /></label><br>
<label for="Time">Time of Birth:</label>
<label class="selectm" for="Hour">Hour:</label>
<select name="hour" size="1" id="hour">
<option value="12" selected>12</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>
<label class="selectm" for="Minute">Minute:</labe
<select name="min" size="1" id="min">
<option selected>00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
<br>
<input class='brk' type="submit" name="submit" value="Continue">
<input class='brk' type="reset" value="Clear Form">
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
then you should increase the width of "label.sex" for it to be able to fit both input and text on the same line. using "em" as unit is better to acheive this and support text-size changes.
Here is the code (completely remove the "label,input,textarea" rule set):
label {
float: left;
margin-bottom: 10px;
text-align: right;
width: 250px;
padding-right: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #FFFFFF;
background: #000000;
}
label.sex {
width: 6em;
}