Topic: scrolling the middle column in a 3 column layout [SOLVED]

Hi folks

I'm currently doing some searching to find out how this is done, but so far I am drawing a blank.

basically I have seen the layout of this website http://www.theconsult.com/latestnews.html and on the page in question you will notice that the centre div scrolls using the browser scroll bar but the left, right and header divs are stationary at all times, does anyone know how this is accomplished?

look forward to reading your replies smile

Yorkie

Last edited by yorkie-t (2008-12-09 06:46:51)

Re: scrolling the middle column in a 3 column layout [SOLVED]

They used css and fixed the various divs.
They have three columns (col01, col02, col03).
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;
}

using top and left and fixed is the key.

Do you have firebug installed - https://addons.mozilla.org/en-US/firefox/addon/1843

That is the best way to see what is going on.

Re: scrolling the middle column in a 3 column layout [SOLVED]

I didnt have it installed but I do now smile thanks for the heads up smile

I'm guessing that I need to fix the position of the header and footer too to ensure they stay on the page?

Re: scrolling the middle column in a 3 column layout [SOLVED]

Yes, fix those as well.

Re: scrolling the middle column in a 3 column layout [SOLVED]

just as I thought wink thanks very much for your help