In a previous article, I discussed how to use CSS positioning to create a tableless layout. Using CSS in this way will ensure that your XHTML is valid - as it is incorrect to use tables for anything other than displaying tabular data. But there is a way to play with positioning and a CSS2 property called "overflow" to make your pages resemble frames, not just tables.
What is it About Frames?
If we're setting out to emulate frames, we need to determine what we want to emulate:
- page is divided into sections
- some sections scroll and some don't
It's easy to create a page that is divided into sections. We learned how to do that in that previous article. But to make that page we created look like a framed Web page, we need to add scrolling. Here's my sample "fake framed" page. (Note: this page was optimized for Mozilla 1 on Windows.) As you can see, I also added borders to make it look more like a framed page that hasn't had the borders turned off.
CSS overflow Property
The overflow property is the way I can get the page to scroll. This property has five different styles:
This is the default, and it indicates that the content should be displayed on the page as the browser normally would.
This style indicates that any extra content that doesn't fit in the box should remain hidden.
With the overflow set to scroll will add scrollbars (both vertical and horizontal) to the box property.
The inherit style sets the overflow to be inherently the same as the parent element.
This is the style we want. It specifies that if the content will overflow the box, scrollbars should display, otherwise, they are left off.
I put the overflow : auto; on both the left navigation element (#leftnavigation) and the main content area (#content). That ensures that if the browser window is really small, both the navigation and the content will be scrollable.