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:
- visible
This is the default, and it indicates that the content should be displayed on the page as the browser normally would. - hidden
This style indicates that any extra content that doesn't fit in the box should remain hidden. - scroll
With the overflow set to scroll will add scrollbars (both vertical and horizontal) to the box property. - inherit
The inherit style sets the overflow to be inherently the same as the parent element. - auto
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.
As with the other page, this page might not look as nice in browsers that don't support CSS positioning. See the HTML. See the CSS. See it in Action.
