Question

Have the following code. The height is variable so the height of the floating object needs to change, but it won’t. It only is as tall as what I put in it unless I fixed the height of the outer div. Where am I going wrong, how can I make it the full height without fixing the height?

EDIT: p tag is to the direct left of the floating div so it can’t be inside the inner one

<li>
<div style="height:(100% doesnt work, 100px does)>
  <div style="float:right; width:20%; height:100%">
    <div>
        Something at the top of page
    </div>
    <div>
        Something at the bottom of the page
    </div>
   </div>
   <p>Other stuff to the left</p>
</div>
</li>

Answer 1

The reason is because 100% means 100% of its parent container’s height. If you want it to fill the entire window, you have to set each one of its parents’ heights. All the way up.