How do I make a overflow:scroll div have the same height of its container? Details inside

I have a website with two columns, within a wrapper div.

The wrapper has the same height as the tallest div by giving floating everything and giving the wrapper height:100%.

Here's my problem: one of the columns is a div with overflow:scroll and several images in it. I tried to set its height to 100%, thinking that it would take up the full height of the wrapper. Instead, it became the height of all the images on top of each other.

If I set the height of the column with images (#rightbox) to a specific height in pixels, this happens.

I want it to have the same height as the other div with text, so I set its height to 100%. Then this happens.

How can I make the two columns have the same height?

EDIT: I forgot to mention that the amount of text varies, so I can't define a specific height for the wrapper.

2012-04-05 23:10
by NoName

You cannot define height as 100% unless your parents provides an actual heights.

#wrapper {
   height: 800px;
}

/* Now you can make the columns inside take the full height of its parent *?
#wrapper .columns {
   height: 100%;
   overflow: auto;
}

Note: if the wrapper sits inside the body element then you will need to set html,body { height: 100%; } before the wrapper can be set to 100%

2012-04-05 23:47
by Starx

good call I didn't think of mentioning this - rlemon 2012-04-05 23:48

@BrorBojlén, The additional note provided by rl3mon, fixes that problem - Starx 2012-04-06 00:06

Thanks for your answer! I forgot to mention that the amount of text varies, so I can't define a specific height for the wrapper. If the wrapper can't have a defined height, and the overflow:scroll div requires a defined height, it looks like there is no non-workaround way for this to work - NoName 2012-04-06 00:07

Given the limited amount of code provided... here is a pure css solution.

http://jsfiddle.net/rlemon/Q7MvS/

.wrapper {
 height: 600px;
 width: 800px;   
}
.panel {
 float: left;
 width: 400px;  
 height: 100%;    
}
.panel.right {
 overflow: scroll;
}

2012-04-05 23:42
by rlemon