Link to home
Start Free TrialLog in
Avatar of chrisfixit
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>
Avatar of GrandSchtroumpf
GrandSchtroumpf

you should only float <label>, not <input>.
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;
}
Avatar of chrisfixit

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:</label>
<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:</label>
<select  name="country" size="1" id="country">
      <option selected>United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <option value="American Samoa">American Samoa</option>
            <option value="Andorra">Andorra</option>
            <option value="Angola">Angola</option>
            <option value="Anguilla">Anguilla</option>
            <option value="Antigua and Barbuda">Antigua and Barbuda</option>
            <option value="Argentina">Argentina</option>
            <option value="Armenia">Armenia</option>
            
        </select>
<br>                                                            
<label for="Email2">Email Address:</label>
<input class="email" name="email1" type="text" id="email1" size="35" maxlength="50"
                     onchange="validateEmail(this, '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(this, '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:</label>
      <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
Avatar of GrandSchtroumpf
GrandSchtroumpf

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial