Skip to main content

Overflow


Introduction:
This is the seventh part in my CSS Styling tutorials, in which I will be covering overflow.

What is Overflow?
Overflow is used in CSS to decide what to do with any content that is slightly to big or wide to fit in the dedicated space (overflowing...).

Structure:
overflow: {type};

Example:

  1. overflow: hidden;

Values:
visible - The overflow is not clipped. It still displays outside the element's area. This is the default value for each element.
hidden - The overflow is clipped, and the content which overflows outside of the element's area is hidden and will not be visible on the browser page.
scroll - The overflow is clipped, but a scroll-bar is added to see the rest of the content.
auto - If overflow is clipped, a scroll-bar should be added to see the rest of the content.
inherit - Specifies that the value of the overflow property should be inherited from the parent element.

Linking CSS To a HTML Element:
To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...

  1. class='myClass'

... to the attributes of that element if you chose a class, or...

  1. id='myID'

if you chose an id.

Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...

  1. .myClass {
  2. //Properties go here
  3. }

if you chose a class, or...

  1. #myID {
  2. //Properties go here
  3. }

(You can remove the line beginning with // if you wish).

Here's an example...

  1. <html>
  2. <head>
  3. <style>
  4. .hidden {
  5. background-color: #000;
  6. color: #fff;
  7. font-size: 40px;
  8. width: 300px;
  9. height: 100px;
  10. overflow: hidden;
  11. // Content outside of the 300 x 100 block will be invisible.
  12. }
  13.  
  14. .scroll {
  15. background-color: #000;
  16. color: #fff;
  17. font-size: 40px;
  18. width: 300px;
  19. height: 100px;
  20. overflow: scroll;
  21. // If the content overflows outside of the 300 x 100 element area, a scroll bar will be added to scroll through the content within the given area.
  22. }
  23.  
  24. .default {
  25. background-color: #000;
  26. color: #fff;
  27. font-size: 40px;
  28. width: 300px;
  29. height: 100px;
  30. // overflow: visible; - Default, all content will be displayed regardless.
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div class='hidden'>CONTENT CONTENT CONTENT</div>
  36. <div class='scroll'>CONTENT CONTENT CONTENT</div>
  37. <div class='default'>CONTENT CONTENT CONTENT</div>
  38. </body>
  39. </html>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.