?
Solved

Floating radio buttons

Posted on 2006-06-06
4
Medium Priority
?
515 Views
Last Modified: 2010-08-05
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>
0
Comment
Question by:chrisfixit
  • 2
3 Comments
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16846624
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;
}
0
 
LVL 1

Author Comment

by:chrisfixit
ID: 16848400
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">
0
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 1500 total points
ID: 16852060
you can use some classes to prevent the checkbox from floating...

<label class="sex">Male:<input class"checkbox" name="sex" type="radio" value="male" checked /></label>
<label class="sex">Female:<input class"checkbox" name="sex" type="radio" value="female" /></label><br>

then:

input.checkbox {
  float: none;
}
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month13 days, 20 hours left to enroll

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question