3 column layout with a scrolling center div

[yorks.terrier]

Morning Monkeys

I've been looking into something that I have been aske to implement on my companies website which is a three column layout (which i have done) but they want it so that the center div only scrolls while the header, footer and left and right divs stay static in the same way that this site does it (http://www.theconsult.com/latestnews.html).

I've been looking into how I would do this and have also tried a couple ideas which I thought would work but so far I'm not even close, does anyone know how this is done?

TIA folks

[Bomberman]

<div style="width:500px;height:600px;overflow:auto">
Text
</div>

also try overflow: scroll;

[Bomberman]

ah, i see the link. dunno how to do that particular one. I suppose you could make the top right and left divs absolute but not sure.

If you find a solution be sure to let us know!

[yorks.terrier]

lol I was about to say that I'd tried using hte overflow properties with no success,

dont worry if i do find out I will be sure to let you all know, I'm half tempted to try emailing the developers of the site.

[yorks.terrier]

okay I've sussed it (with the help of firebug) below is an example of what to do:

Code:

div#col01 is defined like this:
#col01 {
  left:32px;
  position:fixed;
  top:29px;
  width:205px;
}
div#col02 just has a width
div#col03 is defined just like col01 but pushed further right:
#col03 {
  left:751px;
  position:fixed;
  top:29px;
  width:205px;
}

I'm still playing around with this to get the header and footer right but this is the basic idea behind it