CSS Overflow Property

CSS Overflow

It's practically a webmasters dream come true! Well, maybe not, but it is nice to be able to fit a lot of text into a confined space using the CSS overflow property. So you know what I'm writing about, here's an example of what I mean:

Favorite Quotes

Man's main task in life is to give birth to himself, to become what he potentially is. The most important product of his effort is his own personality.
- Erich Fromm

As human beings, we are endowed with freedom of choice, and we cannot shuffle off our responsibility upon the shoulders of God or nature. We must shoulder it ourselves. It is our responsibility.
- Arnold J. Toynbee

Hold yourself responsible for a higher standard than anybody expects of you. Never excuse yourself.
- Henry Ward Beecher

The roots of true achievement lie in the will to become the best that you can become.
- Harold Taylor

God gives every bird its food, but He doesn't throw it into its nest.
- Danish Proverb

It's not true that nice guys finish last. Nice guys are winners before the game even starts.
- Addison Walker

It is only imperfection that complains of what is imperfect. The more perfect we are, the more gentle and quiet we become toward the defects of other people.
- Francois de Fenelon

Do not let your fire go out, spark by irreplaceable spark, in the hopeless swamps of the approximate, the not-quite, the not-yet, the not-at-all. Do not let the hero in your soul perish, in lonely frustration for the life you deserved, but have never been able to reach. Check your road and the nature of your battle. The world you desired can be won. It exists, it is real, it is possible, it is yours.
- Ayn Rand

Life is an opportunity, benefit from it.
Life is beauty, admire it.
Life is bliss, taste it.
Life is a dream, realize it.
Life is a challenge, meet it.
Life is a duty, complete it.
Life is a game, play it.
Life is a promise, fulfill it.
Life is sorrow, overcome it.
Life is a song, sing it.
Life is a struggle, accept it.
Life is a tragedy, confront it.
Life is an adventure, dare it.
Life is luck, make it.
Life is too precious, do not destroy it.
Life is life, fight for it.
- Mother Teresa

There are two types of people - those who come into a room and say, "Well, here I am!" and those who come in and say, "Ah, there you are."
- Frederick L. Collins

People seem not to see that their opinion of the world is also a confession of character.
- Ralph Waldo Emerson

In you are natural powers. You already possess everything necessary to become great.
- Chief Crow

You cannot dream yourself into a character; you must hammer and forge yourself one.
- James A. Froude

The principles you live by create the world you live in; if you change the principles you live by, you will change your world.
- Blaine Lee

The best years of your life are the ones in which you decide your problems are your own. You do not blame them on your mother, the ecology, or the president. You realize that you control your own destiny.
- Albert Ellis

Nurture your mind with great thoughts, for you will never go any higher than you think.
- Benjamin Disraeli

Egotism is nature's compensation for mediocrity.
- L.A. Safian

End Quotes

As you saw if you scrolled to the end of the quotes, there's a lot of text that was fit into a comparatively small space. You can use regular HTML and CSS formatting inside the window, too. Here's how the box was created:

<div align="center">
<div style="width: 400px; height: 100px; border: solid black 1px; 
        padding: 5px; font-size: 12px; 
        text-align: left; overflow: auto;">

Content here.

</div></div>

I used the first division tag to align the scrolling window on the center of the page. I then used a second division to create the window itself.

I set the width (400 pixels) using CSS code, then added the height. Next I added a border to the window and set the padding at 5 pixels so the text didn't bump up against the edge of the window. I could have had it borderless as well, as you'll see in the next example.

Next I set the font size, then aligned the text to the left (otherwise it would have been centered because of the first division tag), and finally I put in the magic that made it all work, I added the overflow: auto; property and value.

I used auto for the overflow value, which means the scrollbar appears if it's needed, but if it's not the scrollbar is hidden. The other values for the overflow property are:

visible | hidden | scroll

Here's what each of those mean:

visible
Not recommended. When used with a division tag, some browsers stretch the box when the content overflows, other browsers will overflow the content outside of the set boundaries.

hidden
No scrollbars ever, excess content is inaccessible.

scroll
Always shows both the vertical and horizontal scrollbars whether needed or not.

auto
Best option. Scrollbars disappear if not needed, show if needed.

Before you ask -- you cannot set the horizontal and vertical scrollbars separately. What you set for one is set for both. Also, please remember that because two division tags were opened, you have to close them both or the rest of the page will be centered. Not good, he says.

The color of the scrollbar was inheritied from my web site style sheets, but in the next example you'll see how to change the scrollbar colors.

So, you ready for one more example? This one really blends into the page, maybe too much, some folks might not realize it scrolls.

Uncle Bill
Here's the story of what happened when I met my cousin Bill for the first time. We were at a dinner party at my parents house and he seemed OK at first. Then I noticed he would chew his food up, then take out his teeth to swallow...said he was afraid of swallowing his teeth. I began to think my cousin was a little odd.

I became even more concerned when the cat ran through the kitchen and when her collar bell tinkled, Bill took off his shoe and tried to use it to anwer the phone. You could do that on Get Smart because they really did have shoe phones you know. All Bill had was a stinky old sneaker.

I was really starting to worry about him, because madness sometimes runs in families. When mom asked Bill if he wanted to take some left-overs home he said 'sure' and started stuffing peas and mashed potatoes right into his trouser pockets. Only then did I realize Bill wasn't so odd after all. I went home greatly relieved, because I used the bathroom before I left.

Hey, I didn't say it was a good story.

See the little arrows on the right? Yep, that's all there is for scrollbars...or so it seems. The only things I did differently from the first example was to remove the border around the window and make everything about the scrollbar white, except for the black arrows. If you click your cursor somewhere directly between the black arrows, it will scroll just like when you click a blank area of any scrollbar. Sneaky!

To remove the border I just left the border code out. You have to put in the border code as I did in the first example to have a border. I've colored the part of the code below showing how to blend in the scrollbar a darker red so you can easily see how it was done:

<div align="center">
<div style="width: 400px; height: 100px; 
        padding: 5px; font-size: 12px; 
        text-align: left; overflow: auto; 
        scrollbar-face-color: white; 
        scrollbar-highlight-color: white; 
        scrollbar-3dlight-color: white; 
        scrollbar-darkshadow-color: white; 
        scrollbar-shadow-color: white; 
        scrollbar-arrow-color: black; 
        scrollbar-track-color: white;">

Content here.

</div></div>

Well now, aren't you glad you came to visit me! Send a few of your friends my way!

Web Design

Site Information

More Boogie Jack Sites

CSS Overflow