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>