Resize height of a div according to other one

Question

Is it possible to resize right div to the height of left one using just CSS?
My Example

I've tried a jQuery approach like this:

$(document).ready(function () {
   $("#right").css("height", $("#left").height());
});

This approach isn't working well because I have dynamically loaded content in the left div and jQuery approach sometimes miscalculates the height.

I also tried height:100% on the right div but it didn't work.

You can try to bind a function to handle every time height changes the height on the right div gets resized automatically. The thing about `$(document).ready()` is that it is fired only once when the page is finished loading so when you are adding stuff dynamically it might not be causing the event to be fired. — redDragonzz, Oct 23 '12 at 08:48
Why not to use tables? Maybe it is not that cooooooool as blocks layout but it solves the problem without any hacks. — VisioN, Oct 23 '12 at 08:49
I'm aware of that, and that isn't the issue. I thought that maybe I don't need to use JavaScript at all if it can be solved using pure CSS. — ttkalec, Oct 23 '12 at 08:50
Possible solution: http://stackoverflow.com/a/8741070/681807 — My Head Hurts, Oct 23 '12 at 08:53

score 4 · Answer 1 · answered Oct 23 '12 at 08:50

4

For this you can use display:table property for this. Write like this:

#left{
    margin-right: 15px;
    width: 425px;
    background-color:#11DD52;
}

#right{
    width:200px;
    background-color:#4477AA;
}
#left, #right{
  display:table-cell;
}

Check this http://jsfiddle.net/ZZBM5/

answered Oct 23 '12 at 08:50

sandeep

91,313
23
137
155

That's exactly the same as using tables. – VisioN Oct 23 '12 at 08:50
@VisioN no it's not. The markup is radically different. Tables are for displaying tabular data, not for creating layouts. – Jørgen R Oct 23 '12 at 08:51
@jurgemaister I'm talking about the approach. – VisioN Oct 23 '12 at 08:52
But it's not a table. It's a functionality in which you can use **table** property for the DIV layout – sandeep Oct 23 '12 at 08:52
@jurgemaister Alright. What will you do for IE6,7 (or similar), which do not support `table-cell`? – VisioN Oct 23 '12 at 08:56
@VisioN - I'd redirect them to a form where they can fill in their details and request a print out of the website – My Head Hurts Oct 23 '12 at 08:56
it's supported till IE8 & above. – sandeep Oct 23 '12 at 08:57
3

`` – Timm Oct 23 '12 at 08:57
@sandep this works very well, but I need to have support for IE7. Even if I choose to ignore IE7, how can I create that 15px gap (created by margin on the left block) that was there initially? – ttkalec Oct 23 '12 at 08:58
@MyHeadHurts That solves the problem in case if you do the website for yourself only :) – VisioN Oct 23 '12 at 09:00
@VisioN it's support IE8 http://caniuse.com/#search=display%3Atable. You have to define HTML5 doctype . – sandeep Oct 23 '12 at 09:04
2

@ttkalec i have created hack for IE7 http://jsfiddle.net/ZZBM5/2/ . I know it's not that good solution but it's work for you. – sandeep Oct 23 '12 at 09:27
@sandeep I actually love your solution. Thank you very much. Very clever thinking :) – ttkalec Oct 23 '12 at 09:50

ttkalec · Accepted Answer · 2012-10-23T09:53:38.040

0

EDIT: If you love hacky way of doing things, @sandeep created this great workaround.

I ended up using this great jQuery resize plugin. I was hoping there is an easy CSS solution, but the couple of answers in the comments above give me additional browser compatibility issues.
This is what I've done:

$("#left").resize(function () {
    $("#right").css("height", $(this).height());
});

edited Oct 23 '12 at 09:53

answered Oct 23 '12 at 09:18

ttkalec

741
1
6
26

Resize height of a div according to other one

2 Answers2