CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 5

CSS Checkbox stacking

I'm trying to stack the checkboxes to the left side of the page. Any help would be much appreciated. Here's what I have so far:

<body>
  <h1>Fitness Survey</h1>
    <form class="pure-form" name="survey" method="post"action="mailto:[email protected]" enctype="text/plain">
      <fieldset>
        <legend>Do you belong to a gym or fitness center?</legend>
        <p>
          <input type="radio" name="gym" value="yes">Yes
          <input type="radio" name="gym" value="no">No
          <br>
        </p>
      </fieldset>
      <fieldset>
        <legend>How do you stay in shape?</legend>
        <p>
           <input type="checkbox" name="exercises" value="classes">Fitness classes
           <input type="checkbox" name="exercises" value="weights">Weights
           <input type="checkbox" name="exercises" value="jogging">Jogging
           <input type="checkbox" name="exercises" value="cardio machines">Cardiovascular machines
           <input type="checkbox" name="exercises" value="swimming">Swimming
           <input type="checkbox" name="exercises" value="team sports">Team sports
           <input type="checkbox" name="exercises" value="other">Other
           <br>
         </p>
       </fieldset>
       <fieldset>
         <legend>How often do you exercise?</legend>
         <p>
           <input type="radio" name="frequency" value="once per week">Once per week
           <input type="radio" name="frequency" value="2-3 per week">2-3 times per week
           <input type="radio" name="frequency" value="4-6 per week">4-6 times per week
           <input type="radio" name="frequency" value="every day">Every day<br>
         </p>
       </fieldset>
       <fieldset>
         <legend><strong>Why do you exercise?</strong></legend>
         <p>
           <input type="checkbox" name="why" value="pleasure">I enjoy it
           <input type="checkbox" name="why" value="fitness">I want to keep fit<br>&nbsp;
         </p>
       </fieldset>
       <p>
         <input type="submit"><input type="reset">
       </p>
     </form>
  </body>
</html>

And the CSS is:

fieldset {
  width: 400px;
  border: 2px ridge #ff0000;
  padding: 10px;
  margin-bottom: 10px;
}

legend {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
}

input {
  font-family: Arial, sans-serif;
}

Upvotes: 0

Views: 2157

Answers (1)

spliter
spliter

Reputation: 12569

JSFiddle with the example

In order to improve semantics of your markup and solve your particular problem, I would suggest to:

  1. Update markup for your inputs to have label element, like:

    <fieldset>
    <legend>Do you belong to a gym or fitness center?</legend>
    <label><input type="radio" name="gym" value="yes" />Yes</label>
    <label><input type="radio" name="gym" value="no" />No</label>
</fieldset>

    Note absence of <br> and p elements. Those are not needed and are not adding any value to your code's semantics. Wrapping your inputs and text with label makes the text clickable (allowing to select a checkbox/radiobutton by clicking that text and not only the input itself) and associated with appropriate field.

  2. In your CSS add the following:

    .pure-form label {display: block; clear: left}
.pure-form input {float: left;}

Upvotes: 1

Related Questions