Fixed Position Column

@sticks464Apr 09.2007

Is there a way to keep a left column fixed using position-fixed, left and top positions, that will work in all screens, for a 950px, 2 column center aligned page? I want to keep the centered page and not have to place it on the left side of the screen, yet keep the left navigation column stationary and work on a fluid layout.

to post a comment

CSS

@CentauriApr 09.2007 — #You mean that the left navigation column is one of the columns of the two-column centred layout ? Getting it to remain stationary is simple in modern complient browsers, but IE cannot work it out. If the content scroll bar can be at the right side of the centred page, instead of at the edge of the window, then this can be done cross-browser easily enough. Not sure whether it could be done with a normal scroll bar position though. If the page can be full width rather than a fixed width, then a fixed navigation pane with normal looking scroll bar can be done.

Cheers

Graeme

@sticks464authorApr 09.2007 — #You mean that the left navigation column is one of the columns of the two-column centred layout ?[/QUOTE]That's correct. I can get it to remain stationary with position:fixed left:XXX top:XXX, but when viewed on a different screen size it moves. I thought there might be a css way to have it adjust with screen size.

@CentauriApr 09.2007 — #If you don't specify left and top values, but rather position by margins, the nav div will position relative to its container. Once you specify top or left, it is relative to the screen. However, using position:fixed doesn't work in IE, so you have to use something else if you want it to work in that browser.

The only other way I can think of would be to have the html, body and container all fixed to 100% height and hidden overflow which locks all those elements to screen size without scroll bars. The nav div will therefore not be able to move. The content column is then set to overflow:auto so that only it can scroll on long content. This will move the scrollbar to the side of the layout rather than the side of the window, but at the moment I can't think of any other way of doing it.

Cheers

Graeme

Fixed Position Column

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Fixed Position Column

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴