How do I keep two side-by-side divs the same height?

Question

I have two divs side by side. I\'d like the height of them to be the same, and stay the same if one of them resizes. I can\'t figure this one out though. Ideas?

To c

Answer 1

If you don't mind one of the divs being a master and dictating the height for both divs there is this:

Fiddle

No matter what, the div on the right will expand or squish&overflow to match the height of the div on the left.

Both divs must be immediate children of a container, and have to specify their widths within it.

Relevant CSS:

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}