I was recently asked to create a framed page for a customers web site. I did not want to use a framed page because they are not search engine friendly. A great alternative was to use the CSS Overflow Property to create frame-like pages.
It allows you to create a window of text or an image within your web page even if it’s too big for the page.
The overflow declaration tells the browser what to do with content that doesn’t fit in a box. You can assign four values to overflow and that give the following results:
visible. the content flows out of the box.
hidden. the overflowing content is completely hidden, not accessible to the user.
scroll. show horizontal and vertical scrollbars.
auto. show scrollbars where necessary (horizontal or vertical or both).
CSS Code
div.scroll {
height: 500px;
width: 600px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;}
This will create a 500×600 pixel window with a grey backgorund, a 1pixel border and 8 pixels of padding around the text.
It will only include scroll bars if the text is too large for the window.
The window can be adjusted by changing the CSS values.
HTML Code
<div class="scroll">
<p>This is the area created with the CSS overflow property</p>
<p>you can place an image or text in this area then adjust the area with the css</p>
</div>
Resources
the overflow:auto make scroll bars visible. What i want is when text rendered is height should keep on increasing rather than a scroll bar(exact effect of word-wrap:breakwword).
Is that possible through CSS?
Your link you sent me came thru, thanks, but it seems to not be working, does anybody have a backup, or mirror source? Just something that works.