Make two divs side by side, one is resizable and the other has same height

Question

I bring here a drama with css height.

I would like to make a layout, a div that contains 2 divs both in same line, one is resizable and the other must fit in the parent's height (same height as the first one).

The first div can have additional information (so i can't fix the height), so it will have more lines, the important is that it must not have a scroll bar. The second div must obey the first height, if it's bigger than it will have a scroll bar.

<div class='container'> <!-- parent -->
    <div class='left'> <!-- resizable -->
    </div>
    <div class='right'> <!-- same height as left div  -->
    </div>
</div>

UNSOLVED CODE

The problem is that i can't figure out how to make it just using css. Or even it's possible just with css. I would not like to use js.

Someone please help me!

*The problem is that i can figure out how to make it just using css.* <- so, where is the problem? — hjpotter92, Jul 24 '13 at 08:03
possible duplicate of [How do I keep two divs that are side by side the same height?](http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height) — , Jul 24 '13 at 08:04
the first div may increase/decrease height with some ajax code, or even the width is fixed, and if a line is too big, it must break the word, making more lines — korogui, Jul 24 '13 at 08:06
@korogui [Here's another solution](http://jsbin.com/uyazip/1/edit) you might want to consider. — Hashem Qolami, Jul 24 '13 at 08:22

score 7 · Accepted Answer · edited Oct 02 '13 at 05:34

7

Fiddle

What you do is make the right one absolutely positioned which stops its height influencing the parent's.

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;
}

edited Oct 02 '13 at 05:34

bguiz

27,371
47
154
243

answered Jul 24 '13 at 08:10

Hashbrown

12,091
8
72
95

Note that for this to work the parent must also be non-static (in this case `relative`). – Enigmadan Jul 24 '13 at 08:14
3

I didn't know that. Thanks :) YLSNED. Either way, I doubt OP wants it to be static (its not in his fiddle regardless). – Hashbrown Jul 24 '13 at 08:16

Make two divs side by side, one is resizable and the other has same height

1 Answers1