title: Floating inline divs in jQuery-ui accordion breaks variable width?
body: <p>I am creating a schedule with an accordion that will have titles composed of information returned from a database query.  I need to be able to put several discrete elements in the title (a name, an ID number, a date, a time). When I put divs into the title link they display vertically.  I want them to display horizontally.  So I added a float:left; to them, but that breaks the accordion.  Here is the code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="schedule1"&gt;
      &lt;h3 class="accordionTitle"&gt;
          &lt;a href="#" class="accordionLink"&gt;
              Title
          &lt;/a&gt;
      &lt;/h3&gt;
      &lt;div&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque etc...
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;div id="schedule2"&gt;
      &lt;h3 class="accordionTitle"&gt;
          &lt;a href="#" class="accordionLink"&gt;
              &lt;div&gt;
                  &lt;div class="inline"&gt;title&lt;/div&gt;
                  &lt;div class="inline"&gt;text&lt;/div&gt;
                  &lt;div class="inline"&gt;in&lt;/div&gt;
                  &lt;div class="inline"&gt;inline&lt;/div&gt;
                  &lt;div class="inline"&gt;divs&lt;/div&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/h3&gt;
      &lt;div&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque etc...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.accordionLink {
      font-weight: bold;
  }
  .inline {
      float: left;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function() {
      $('#schedule1, #schedule2').accordion({ 
          header: "h3",
          collapsible: true,
          active: false,
          fillSpace: true
      });
  });
  </code></pre>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thanks</p>