CODEWITHSUNDEEP
htmlcss
test
test

Reputation: 18200

Floating div will not give full height

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.

Upvotes: 3

Views: 149

Answers (3)

Martin Schaer
Martin Schaer

Reputation: 4006

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

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

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

Upvotes: 3

wkm
wkm

Reputation: 1762

This page might guide you in the right direction:

http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

Upvotes: 0

Related Questions