Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
Scrolling Content Without Frames
The Problem
Quite often a web designer will want a static menu but for the main content within their website to scroll. The temptation is to reach for the frames with one frame holding the menu and a second for the content. Although this does produce the desired effect the use of frames can cause many other issues. I will show you two methods to achieve this same effect without frames.
Solution One - Position Fixed
The first solution I will cover involves using the CSS rule, position: fixed;. Say I have three div tags, A wrapper to centralise the layout of my website on the screen, one to hold the menu and one for the main content of my website design. I would use the following CSS code to leave the menu div in a fixed position whilst the content div scrolls;
#menu {
float: left;
position: fixed;
width: 200px;
background-color: #0C6;
padding: 20px 10px;
}
#content {
float: right;
width: 500px;
padding: 20px;
background-color:#09F;
}
There are two things to really take note of here. I have added the CSS 'position: fixed;' to the menu div styles. This holds the menu div in position even if the viewer is scrolling through the content. The second thing to take notice of is that the content has 'float: right;' in the styles. When floating elements that don't have 'position: fixed;' in the styles you can float as many items left as you like and they will nestle up against each other. If the content had been foated left in this example, it would have disappeared under the menu div. Fixing the position takes a div out of the natural 'flow' of a layout so you must watch out for this.
For an example of this kind of page set-up, please click here.
The main issue with using 'position: fixed;' is, of course, IE6! It is not supported...no surprise there then. In the example I have given the website will not 'break' in IE6, you just won't get the desired scrolling effect.
Solution Two - Overflow Scroll
Sticking with the same kind of layout you can also use 'overflow: scroll;' for the content div to get a similar effect. Using this CSS property causes the div where it is added to develop scrollbars when the content is too long for the div. For this to work you must specify a height on the content div. The CSS looks like this;
#menu {
float: left;
width: 200px;
background-color: #0C6;
padding: 20px 10px;
}
#content {
float: right;
width: 500px;
height: 500px;
padding: 20px;
background-color:#09F;
overflow: scroll;
}
Notice this time that the styles are added to the CSS for the content div and that I have specified a height of 500px and have used the 'overflow: scroll;' property.
For an example of this kind of page set-up, please click here.
I probably prefer this solution to using the fixed position method. However, scrollbars tend to be UGLY, especially if your viewer is on a PC running an older version of Windows. The solution makes this method slightly more complicated but it is worth getting right. It involves using some javascript to style your scrollbars that works cross-browser. There are a few good scrollbar styling tutorials and downloads out there. The one I have had the most success with is Jscrollpane by Kelvin Luck.
I know that IE has had hacked support for styled scrollbars for some time and that Webkits have started to support this by using the -webkit- prefix with the following pseudo-elements;
scrollbar
scrollbar-button
scrollbar-track
scrollbar-track-piece
scrollbar-thumb
scrollbar-corner
resizer
I believe that support may start to grow for this kind of scrollbar styling using CSS, meaning that 'overflow: scroll;' seems now like a very palatable option for scrolling content and a fixed menu.
