Bootstrap: div inside li - html

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

Answer 2

It pretty late to answer this question but I thought it will help some-one if they want to try alternative approach to the accepted solution.
I kept the structure in a container and set its max-width property to 100%
<ul class="list-group">
<li class="list-group-item">
<div class="container" style="max-width:100%">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>