Floating inline divs in jQuery-ui accordion breaks variable width?

I am creating a schedule with an accordion that will have titles composed of information 开发者_如何学Pythonreturned 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:

HTML

<div id="schedule1">
    <h3 class="accordionTitle">
        <a href="#" class="accordionLink">
            Title
        </a>
    </h3>
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque etc...
    </div>
</div>
<br /><br /><br />
<div id="schedule2">
    <h3 class="accordionTitle">
        <a href="#" class="accordionLink">
            <div>
                <div class="inline">title</div>
                <div class="inline">text</div>
                <div class="inline">in</div>
                <div class="inline">inline</div>
                <div class="inline">divs</div>
            </div>
        </a>
    </h3>
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque etc...
    </div>
</div>

CSS

.accordionLink {
    font-weight: bold;
}
.inline {
    float: left;
}

JS

$(document).ready(function() {
    $('#schedule1, #schedule2').accordion({ 
        header: "h3",
        collapsible: true,
        active: false,
        fillSpace: true
    });
});

Any help would be appreciated.

Thanks

---

Try

.inline {
    display: inline-block;
    /* "float: left" must be removed */
}

---

I'd just put the items coming back from the database in spans, and don't float them:

http://jsfiddle.net/MLatzke/r3SdE/

If you need to keep them as divs, you can also put a clearfix (via http://nicolasgallagher.com/micro-clearfix-hack/) on the parent div:

http://jsfiddle.net/MLatzke/rk2Xn/