Question

I have created a page with a fixed width column on the right that contains thumbnail images, and large images are displayed to the left. I currently use a Javascript function to limit the height of the #thumbcontainer div to the size of the window so that the #thumbcolumn div can scroll within if the number of thumbnail images exceed the height of the window.

However, I am thinking there must be a way to do this using CSS. The problem is that the images contained in #thumbcolumn don’t stick to the height of the window and scroll – instead they expand beyond the window’s height so that the whole window has to be scrolled down.

Here is the code:

<div class="imgcntnr">
   <div id="displayimages">
      <span style="white-space: nowrap;" id="imageset">various images</span>
   </div>

   <div id="thumbcontainer">
        <div id="thumbcolumn"></div>
   </div>
</div>

Here is the CSS:

.imgcntnr {
  padding: 10px 100px 0 0;
  overflow: hidden;
  height: 100%
}

#displayimages,
#thumbcolumn {
  float: left;
  position: relative;
}

#displayimages {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 3px;
}

#thumbcontainer {
  height: auto;
}

#thumbcolumn {
  width: 100px;
  height: 100%;
  overflow: auto;
  margin: 0 auto;
  margin-right: -100px;
}

.thumbimages {
  display: block;
  margin: 0 auto 5px;
}

Any help would be appreciated.

Answer 1

Could you use something like

.thumbnailcontainer
{
    position: fixed;
    top: 0;
    bottom: 0;
    right:0;
    width: 200px;
    overflow-y: auto;
}

That should, in theory, give you a container that spans top to bottom of the window and scroll when the image list becomes to big.

EDIT: Example: http://jsfiddle.net/QgY3L/