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;
}