Question

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.

Answer 1

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%