Floating div will not give full height - html

Question

jsFiddle
The left red div will not go all the way down. I want it to go all of the way down, regardless of how tall the main ("li") div is.
css
.li_wrap {
padding:7px;
float:left;
}
.song-list li{
position: relative;
display: block;
padding:0;
margin-bottom:10px;
background: black;
color: yellow;
z-index:7;
text-decoration: none;
}
.rank_pos {
background:red;
margin:0;
padding:3px;
height:100%;
float:left;
}
body {font-size:12px; font-family:Verdana, serif;}
html
<ul class="song-list">
<li id="1">
<div class="rank_pos">1st</div>
<div class="li_wrap">Testing</div>
<div style="clear:both;"></div>
</li>
<li id="2">
<div class="rank_pos">2nd</div>
<div class="li_wrap">Testing</div>
<div style="clear:both;"></div>
</li>
</ul>​
Or maybe there's a better way of doing it.

Answer 1

Clean up a little bit - http://jsfiddle.net/gDByS/2/
HTML
<li>
<span>3rd</span>
<div>Testing<br />Testing<br />Testing<br />Testing<br />Testing</div>
</li>
CSS
.song-list li{
position: relative;
display: block;
padding:0;
margin-bottom:10px;
background: black;
color: yellow;
z-index:7;
text-decoration: none;
overflow: hidden;
line-height: 22px;
}
ul li span{
background:red;
margin:0;
padding: 0 5px;
height:100%;
display: block;
position: absolute;
}
ul li div {
margin-left: 40px;
}

Answer 2

This page might guide you in the right direction:
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

Answer 3

You could use jQuery for that: http://jsfiddle.net/SF24t/
Or there is a trick that helps in some cases: If you want, for example, to have both "boxes" separated by a border that goes all the way to the bottom, you can have that border painted in background image with repeat-y