How can we make the height of second div same as the height of first div which is dynamic?

Question

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#left {
    float:left;
    width:180px;
    background-color:#ff0000;
    height:40px;
}
#right {
    width: 100%;
    background-color:#00FF00;
}
</style>
</head>

<body>
<div>
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>
</body>
</html>

Here i have got two div's left and right. Height of left div is 40px how can i make the height of right 40px and also if the height of left changes height of right also must be changed same height as that of left div.

You could start from: [Fluid Width Equal Height Columns](http://css-tricks.com/fluid-width-equal-height-columns/). — emmanuel, Sep 18 '14 at 07:06
possible duplicate of [How to create equal height columns in pure CSS](http://stackoverflow.com/questions/14763363/how-to-create-equal-height-columns-in-pure-css) — t.niese, Sep 18 '14 at 07:08
@known what you want to do can be resolved by the "faux columns" technique, you can google for it but the link provided by emmanuel is the perfect answer, you should definitely have a look to it. — pomeh, Sep 18 '14 at 07:11

score 4 · Accepted Answer · edited May 23 '17 at 12:21

4

You could do it like this:

#div {
    display: table;
    width: 100%;
}
#left {
    width:180px;
    background-color:#ff0000;
    height:40px;
    display: table-cell;
}
#right {
    background-color:#00FF00;
    display: table-cell;
}

<div id="div">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

Thanks to @t.niese

edited May 23 '17 at 12:21

Community

1
1

answered Sep 18 '14 at 07:10

Anonymous

10,002
3
23
39

The `#left` should not have `display: inline-block`, but should also be `display: table-cell` – t.niese Sep 18 '14 at 07:18
@t.niese NO, `min-height` doesn't work if both childs are set as `display: table-cell;` that's why I use one child as `inline-block` element. – Anonymous Sep 18 '14 at 07:19
It is correct, that the `min-height` would not work on table cells, you have to use `height` instead of `min-height` there: [W3C:CSS21 Tables](http://www.w3.org/TR/CSS21/tables.html#height-layout). It is true that `display: inline-block` or `display: block` will work, as [`[...]Any table element will automatically generate necessary anonymous table objects around itself[...]`](http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes), but then you should explain why you use `inline-block` (That it becomes a child of the anonymously create `table-cell` block and is used for the `min-height`.) – t.niese Sep 18 '14 at 07:42
1

Don't get me wrong. It is not incorrect, but it should be explained, as it relays on the _missing element adding_ of the layout engine, which might have other unexpected effects. ([JSFiddle with `table-cell` and correct width](http://jsfiddle.net/79vqdn2u/1/)) – t.niese Sep 18 '14 at 07:48
1

@MaryMelody You could [give the `min-height` to the table itself](http://jsfiddle.net/hashem/79vqdn2u/4/). *[I don't remember if I told you before, Anyway :)]* – Hashem Qolami Sep 18 '14 at 13:03
@HashemQolami Yeah, you didn't tell me about it before. _Thank you very much! :)_ – Anonymous Sep 18 '14 at 13:33

score 0 · Answer 2 · answered Sep 18 '14 at 07:06

0

You can do it simply by using jquery

FIDDLE DEMO

$('#right').css('height', $('#left').height()+'px');

answered Sep 18 '14 at 07:06

Richa

3,261
2
27
51

2

jQuery isn't tagged at all! – Dhaval Marthak Sep 18 '14 at 07:07

score 0 · Answer 3 · answered Sep 18 '14 at 07:10

0

Try Demo

#container
{
  height:40px;
}
#left {
    float:left;
    width:180px;
    background-color:#ff0000;
    height:100%;
}
#right {
    width: 100%;
    background-color:#00FF00;
    height:100%;
}

<div id="container">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>

answered Sep 18 '14 at 07:10

Fabio

1,890
1
15
19

1

You answer does not respect the `[...]and also if the height of left changes height of right also must be changed same height as that of left div.[...]` of the question. – t.niese Sep 18 '14 at 07:13

How can we make the height of second div same as the height of first div which is dynamic?

3 Answers3