Question

<div id="main">
    <div id="left">
        news feed goes here
    </div>
    <div id="right">
        another news feed ges here
    </div>
    <div style="clear:both;"></div>
</div>

Suppose I have a container “main”, and I have 2 columns. Both columns are float:left;.

When people click “load more” on the left news feed column, of course it will expand the height of that column because we load more content. But I want the right column to also expand with it. In other words, I want the “right” column to be 100% height of main, always.

How can I do that? Do I se the “right” column’s height to be 100%? or what?

Answer 1

duplicate or not.. here’s a fiddle to give you an idea how you could do this

http://jsfiddle.net/pixelass/uAur5/

HTML

<span class="more">load more</span>
<div class="main">
    <div class="left">this is a left box</div>
    <div class="full">this is the right box</div>

</div>

CSS

.left {
    background:#666;
    margin:10px;
    width:130px;
    height:80px;
    float:left;
    padding:10px;
}
.full {
    width:130px;
    background:#eee;
    float:right;
    height:80px;
    padding:10px;
    margin:10px;
}
.main {
    width:500px;
    background:#000;
    height:140px;
    margin:20px 10px;
}
.more{
border:#000 1px solid;
    padding:3px;
    background:#222;
    color:#aaa;
    margin:20px;
    cursor:pointer;
}

jQuery

$('.more').click(function(){
   $('.main').append('<div class="left">this is a left box</div>');
   $('.full').css('height', '+=120px'); 
   $('.main').css('height', '+=120px'); 
});