Prevent text from wrapping under a checkbox

by

This seems to work:

http://jsfiddle.net/7WmGr/5/

I gave the label a margin-left of 18px and the checkboxes a margin-left of -18px.

Seems to work in Chrome & IE9.

div.right {
  width: 598px;
}

form#updateProfile fieldset label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  float: left;
  width: 30%;
  margin-left: 18px;
}

form#updateProfile fieldset label input[type="checkbox"] {
  margin-left: -18px;
}
<div class="right">
  <form id="updateProfile">
    <fieldset class="checkboxes">
      <p>4. What is your favorite type of vacation?</p>
      <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
      <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
      <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
      <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
      <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
      <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
      <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
      <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
      <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label>
      <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label>
      <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label>
    </fieldset>
  </form>
</div>

Leave a Comment