Scrolling Content, how do you do it...should you?

Ok, I have a design for a web site with a menu positioned on the left and a "main content area" to the right of the menu. I would like the content area to grow vertically only, but be in it's own "frame" (have scroll bars to move down through while the rest of the page remains motionless.) I've tried IFRAMEs and didn't really like them. Someone told me that I could do the same thing with DIVs and CSS.

I got the div looking the way I want but my problem is that the div scrolls horizontally as well as vertically. I'm using the overflow option. ' overflow: auto; '

I can re-type and position the text and content and that fixes the problem but isn't there a way to make your text automatically fit the container it's put in instead of the div changing itself to accomodate the text?

Also I have heard other developers criticize the scrolling content idea.
Is it foepaw? (don't know how to spell that word)
And if so, why?

My rational is:
I have quite a bit of content and wanted the menu and other links to remain where the viewer could get easy access to them.
I've never liked the target links that take you back up to the top of the page. I know of ways to make the menu drop down and follow the viewer as they scroll but think those types of menus to be annoying and a bit tacky. (just my opinion, don't wanna step on anyone's toes )

Any help, advice...etc would be most welcome.

 

No not like that. That's a little too complicated. Just a little window within a window I guess...cept it wouldn't be a window...just scroll like one?...I've ceased making sense I fear.

 

You can do this with a DIV, using the CSS property "overflow: ;"

There are different options:

Code:

overflow: auto;
overflow: hidden;
overflow: scroll;
overflow: visible;

CSS Overflow Property

I think that's what you mean, like if the content is larger than the DIV's height you can either make the DIV bigger to accomodate the content, hide the content, scroll the DIV (scroll bar at the side of the DIV) - I think that's what the options do.
overflow: visible;

I think you'd want the "overflow: scroll;" property.

 

Is there any way to keep it from scolling horizontally without have to manually format my text or images to fit the Div's dimensions?

Something that would just automatically push the text downward instead of adding horizontal scrolling.

 

Doesn't that only work in IE?

 

Code:

<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: auto
}
</style>

try this.... specify the width and height to your liking.

 

What about creating a table with the width 100% of the frame? Resizing the window will automatically adjust the width of the table to fit the width of the window since it's 100%, not in pixels.

 

Using tables for layout isn't considered good design and coding practice anymore.

 

tables are like... so old school

 

Guess that makes me a bit old school =\

 

Yeah, they're not in-keeping with Web Accessibility guidelines either...

Use the <div> tag and CSS to construct the actual layout - tables are for tabular data.