CODEWITHSUNDEEP
htmlcss
Phife Dawz
Phife Dawz

Reputation: 1

Div height depending on image in another div

I want the left div to be in the same height as the right div (which contain a image). The problem is that the image is fluid (that is, I can't have a specific size on the left div).

Is this possible? 

<div class="container">
    <div class="left">
        <div>text</div>
        <div>text</div>
    </div>
    <div class="right">
        <div>image</div>
    </div>
</div>

Upvotes: 0

Views: 155

Answers (3)

coopersita
coopersita

Reputation: 5041

Here's a list with different approaches to do this: http://css-tricks.com/fluid-width-equal-height-columns/

Upvotes: 0

TehTooya
TehTooya

Reputation: 124

VKen, what it looks like you are trying to achieve is a Faux Column layout.

One very simple (js-less) solution is to use an image that covers the container div:

.container{overflow:hidden;background: url(faux_background.jpg) repeat-y}
.left,
.right{float:left;}
.left{width:30%}

This does the following: The container will wrap around both the left and right divs, regardless of their height. The left div will always be at 30%. The background of the container div will give off the illusion of an infinitely growing left div (given the right div is longer, or vice versa).

For more information, A list apart has a nice article on this: http://www.alistapart.com/articles/fauxcolumns/

Upvotes: 1

Ahmad Alfy
Ahmad Alfy

Reputation: 13371

Sadly this cannot be done straight forward with CSS ... It needs JavaScript. Here's how to do it with jQuery

var highestCol = Math.max($('.left').height(),$('.right').height());
$('.container > div').height(highestCol);

This will get the height of the taller <div> then assign it to both the right and left. This way both will have the same height.

I would recommend you add a class like column too to your right and left divs. Then you can use :

var highestCol = Math.max($('.left').height(),$('.right').height());
$('.column').height(highestCol);

And we could use it as a jQuery plugin too ... consider :

$.fn.setAllToMaxHeight = function(){
    return this.height( Math.max.apply(this, $.map( this , function(e){
        return $(e).height()
    }) ) );
}

This way you can use it on any set of divs you want them to have equal height.

$('div.columns').setAllToMaxHeight();

And for sure we want our code to run when all the images are loaded (because if it's not and the DOM is ready the height wont be correct) so we wrap our code in :

$(window).load(function () {
    // use the plugin way :
    $('div.columns').setAllToMaxHeight();

    // or use the other way :
    var highestCol = Math.max($('.left').height(),$('.right').height());
    $('.column').height(highestCol);

});

Upvotes: 2

Related Questions