Question

Not a front-end UI but have a (probably) very easy problem to fix and updated this question css variable length columns extending too far. I have two floated elements shown in this screen shot and fiddle http://jsfiddle.net/trestles/U7mYT/ . One is floated left and the other (index-right-content) is floated right. The floated right div has two columns of content. The second column is much longer but doesn’t expand out the box to push down the container. The index-right-content is posistion:relative.

I can see that if I extend the middle column, it expands out the index-right-content but the right handed column doesn’t do that.

thx

Answer 1

You use absolute positioning for the second column, which takes it out of the flow – it won’t affect the height of the parent div any more.

Better option would be to float both colums in the right block, and add a clear element:

http://jsfiddle.net/U7mYT/3/

<div id='content'>
  <div id='featured-lists'>
    <div class='index-left-list'>
      <div class='index-box'>
        <div class="cluster-box"></div>
      </div>
    </div>
    <div class='index-right-content'>
      <div class='index-box'></div>
      <div class='index-box right'>
        <div class="cluster-box"> </div>
      </div>
      <div class="clear"></div> <!-- added -->
    </div>
    <div style="clear:both;height:1px;overflow:none;"></div>
  </div>
  <div id='footer'> here is footer </div>
</div>

The CSS for the last column:

.index-box {
    width: 300px;
    float:left;
}

.right {
    float:left;
}
.clear {
    clear:both;
}