Bootstrap: div inside li

Question

I am trying to add divs to the list items of my ul, but this is causing the Twitter Bootstrap framework to behave weirdly. Is this because of something I am doing wrong, or is there a different solution for what I am trying to do?

The code:

<h3>Track listing</h3>
<ul class="list-group">
    <li class="list-group-item">
        <div class="song-title">1. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
    <li class="list-group-item">
        <div class="song-title">2. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
    <li class="list-group-item">
        <div class="song-title">3. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
</ul>

The CSS code:

.song-title {float: left;}
.song-duration {float: right;}

I am using the float attributes in an attempt to make each song's title appear on the left, and the durations on the right. From my (very limited) CSS experience, this should work.

The result:

I have the impression that the list items' sizes are not taking the div sizes in consideration, instead resizing as if they were completely empty.

Any thoughts?

Answer 1

You can clear:both on the li to treat the li as a block level element.

(Add a clearfix on the li)

Track listing

<ul class="list-group">
    <li class="list-group-item clearfix">
        <div class="song-title">1. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
    <li class="list-group-item clearfix">
        <div class="song-title">2. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
    <li class="list-group-item clearfix">
        <div class="song-title">3. Song Title</div>
        <div class="song-duration">3:50</div>
    </li>
</ul>

Check this fiddle