title: Prevent text from wrapping under a checkbox
body: <p>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. </p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="right"&gt;
      &lt;form id="updateProfile"&gt;
          &lt;fieldset class="checkboxes"&gt;
              &lt;p&gt;4. What is your favorite type of vacation?&lt;/p&gt;
              &lt;label&gt;&lt;input type="checkbox" name="vacation" value="Ski Trips"&gt; Ski Trips&lt;/label&gt;
              &lt;label&gt;&lt;input type="checkbox" name="vacation" value="Beach Visits"&gt; Beach Visits&lt;/label&gt;
              &lt;label&gt;&lt;input type="checkbox" name="vacation" value="Cruises"&gt; Cruises&lt;/label&gt;
              &lt;label&gt;&lt;input type="checkbox" name="vacation" value="Historical and educational trips"&gt; Historical and educational trips&lt;/label&gt;
              &lt;label&gt;&lt;input type="checkbox" name="vacation" value="Yachting"&gt; Yachting&lt;/label&gt;
              &lt;label&gt;&lt;input type="checkbox" name="vacation" value="Road Trip"&gt; Road Trip&lt;/label&gt;
              &lt;label&gt;&lt;input type="checkbox" name="vacation" value="Spa Weekend"&gt; Spa Weekend&lt;/label&gt;
              &lt;label&gt;&lt;input type="checkbox" name="vacation" value="Bed and Breakfast"&gt; Bed and Breakfast&lt;/label&gt;
              &lt;label&gt;&lt;input type="checkbox" name="vacation" value="Stay home and relax"&gt; Stay home and relax&lt;/label&gt;
              &lt;label&gt;&lt;input type="checkbox" name="vacation" value="Gambling Trips"&gt; Gambling Trips&lt;/label&gt;
              &lt;label&gt;&lt;input type="checkbox" name="vacation" value="Volunteer"&gt; Volunteer&lt;/label&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>div.right{width:580px;}
  
  form#updateProfile fieldset label{
      display: block;
      margin-bottom: 5px;
      font-size: 16px;
      float: left;
      width: 33%;
  }
  </code></pre>
  
  <p>See my fiddle here: <a href="http://jsfiddle.net/fmpeyton/7WmGr/">http://jsfiddle.net/fmpeyton/7WmGr/</a></p>
  
  <p>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.</p>
  
  <p>Thanks!</p>