Prevent text from wrapping under a checkbox

Question

I'm laying out a set of checkboxes and I am running across the age-old issue of text wrapping underneath a checkbox if the text is too long.

My HTML:

<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> 

My CSS:

div.right{width:580px;}  form#updateProfile fieldset label{     display: block;     margin-bottom: 5px;     font-size: 16px;     float: left;     width: 33%; } 

See my fiddle here: http://jsfiddle.net/fmpeyton/7WmGr/

After much searching on different sites, I can't seem to find a reasonable solution. I am open for suggestions on changing my markup/styles, but I would like to keep the code as clean and semantic as possible.

Thanks!

Answer 1

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>