CSS Overflow Property – creating frame-like pages

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

Scroll area with overflow in CSS

Using CSS Positioning to Create Frame-like Pages

Comments

  1. 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?

  2. 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.

Trackbacks

  1. […] The first, word-wrap: break-word, is Microsoft proprietary and only works in Internet Explorer 5.5 on Windows or Safari 1.3+ on Mac. It will make word-wrap happen in those browsers, and it even breaks individual words that are too long for the container – word-break example. The second, overflow: auto, will give you in all browsers scrollbars when the content exceeds the width or (if specified) height of the container – overflow example. The useful overflow property takes other values: visible, hidden, and scroll. Interestingly, divs with overflow set to auto can make a good alternative to frames and iframes. On this blog – at the moment, at least – I specify both methods in my CSS, and get wrapping in IE and scrolling in Firefox. […]

  2. […] The first, word-wrap: break-word, is Microsoft proprietary and only works in Internet Explorer 5.5 on Windows or Safari 1.3+ on Mac. It will make word-wrap happen in those browsers, and it even breaks individual words that are too long for the container – word-break example. The second, overflow: auto, will give you in all browsers scrollbars when the content exceeds the width or (if specified) height of the container – overflow example. The useful overflow property takes other values: visible, hidden, and scroll. Interestingly, divs with overflow set to auto can make a good alternative to frames and iframes. On this blog – at the moment, at least – I specify both methods in my CSS, and get wrapping in IE and scrolling in Firefox. ← [prev] De-animatorSpeak your mind » […]

Speak Your Mind

*