title: How to prevent 100% width of <span> with "float: right;" content in IE6 & 7?
body: <p>I have a dynamically generated form that displays fine in all browsers that I have tested except IE6 &amp; 7. I have headings that should be able to be placed either above or to the side of the form inputs. For radio buttons and check boxes I want the control to the left of the label, for all other inputs I want the control to the right. The HTML should be the same for both, only the CSS should change.</p>
  
  <pre>
  () Radio 1  () Radio 2
  [] Checkbox 1  [] Checkbox 2
  Text |____________|
  etc.
  </pre>
  
  <p>or</p>
  
  <pre>
  Radio 1  Radio 2
  ()       ()
  Checkbox 1  Checkbox 2
  []          []
  Text
  |____________|
  etc.
  </pre>
  
  <p>So far I've got</p>
  
  <pre><code>&lt;span class="control"&gt;
    &lt;label for="a1" class="forbutton"&gt;A1&lt;/label&gt;
    &lt;input type="checkbox" id="a1" class="form-input-checkbox" name="a" value="1"/&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>or something similar for each input. The CSS is</p>
  
  <pre><code>.forbutton {
    margin-bottom: 0.20em;
    float: right;
  }
  .control {
    display: inline-block;
    vertical-align: text-top;
    position: relative;
  }
  
  /* Only if you want labels above inputs */
  .form-input-checkbox,
  .form-input-radio {
    display: block;
    clear: both;
  }
  </code></pre>
  
  <p>In IE6 &amp; 7 the &lt;span&gt;s end up being 100% width instead of taking the width of their content (as with the other browsers, including IE8). How can I fix this easily? If I give the span a width it does fix it, however, I don't know how wide it should be since the labels are dynamically generated.</p>
  
  <p>Goals:<br>
  Valid HTML<br>
  Valid CSS<br>
  Labels before inputs in HTML code<br>
  Same HTML code for labels above and labels to the side</p>
  
  <p>Any solution that achieves the same outcome will be gratefully accepted!</p>