div height changes as other fluid div height changes

Question

I have a three column page with two fixed divs on either side and a fluid (100%) div in the middle that stretches to fill the remaining space and the viewport is enlarged. In the central 100% div there is an image carousel, so as the width of the div increases so does the height. My question is, is there anyway to give the right hand div a css height value that changes so that it is always the same height as the central div? Perhaps some javascript that modifies the div's height as the central div grows vertically?

Here's my CSS:

.container {
min-width: 1100px;
width: 100%;
margin: auto;
text-align: left;
height: 100%;

}

.left {
  float: left;
  width: 230px;
  margin-left: 20px;
}

.middle {
  top: 10px;
  margin-left: 270px;
  margin-right: 270px;
}

.right {
  float: right;
  width: 230px;
  margin-right: 20px;
}


#imgcontainer {
  width: 100%;
}

The div #imgcontainer is found within the div .middle. Ideally, I would like the div .right's height to always be the same as the div #imgcontainer.

Any help would be greatly appreciated,

Thanks

Answer 1

You're going to need to refactor your markup and CSS.

This post covers how to create equal height columns in pure CSS.