CSS overflow property explained

Home - Tutorials - CSS tutorials

This article tries to teach you how to use the CSS overflow property in your web design.

Tutorial info:

Name:CSS overflow property explained
Total steps:1
Category:CSS tutorials
Date:2010-07-15
Level:Beginner
Product:See complete product
Viewed:4112

Bookmark CSS overflow property explained


AddThis Social Bookmark Button

Step 1 - CSS overflow property

CSS overflow property explained

The css overflow property defines how to handle the internal content if it is bigger than the parent box itself.
Let’s suppose the following simple situation: You have a 100x100 div box and some line of text in the div as follows:

Default overflow

The HTML code which results the output above is this:

Code:
  1. <style type="text/css">
  2.     .parent {
  3.         width:100px;
  4.         height:100px;
  5.         background-color: #aaa;
  6.     }
  7. </style>
  8.  
  9. <div class="parent">
  10.     This_is_a_demo_text_inside_the_div_box.<br/>
  11.     This is a demo text inside the div box.<br/>
  12.     This is a demo text inside the div box.<br/>
  13. </div>
CSS F1

 

As you can see the text doesn’t fit into the div. In other words it overflows it. Usually this is not what you want. There are two solution for this problem:

  1. Remove the width and height property of the div and so it’s size will increase to hold all of the content.

    Default overflow 2

  2. Set the css overflow property to control the appearance of the internal content. The following values can be set for the overflow property:
  • visible : This is the default value and results the output as seen on the first image.

    Overflow visible

  • hidden : Any content outside of the parent box will be invisible.

    Overflow hidden

  • scroll : A scrollbar will be added to the parent box independent from the size of the internal content

    Overflow scroll 1 Overflow scroll 2

  • auto : A scrollbar will be added to the parent box but only if it is necessary. Note the difference between the images with only a short text.
    Overflow auto 1  Overflow auto 2

  • inherit : The value is inherited from it’s parent element overflow value.


Float property effect on default overflow behaviour

During the design of your layout it can happen that you set the float property of a child element. In this case the result will be a bit interesting Let’s see the following 2 code and their output:

This is the basic code. Now without float and overflow settings:

 

Code:
  1. <style type="text/css">
  2.     .parent {
  3.         padding:5px;
  4.         background-color: #aaa;
  5.     }
  6.     .child {
  7.         width:50px;
  8.         height:50px;
  9.         background-color: red;
  10.     }
  11. </style>
  12.  
  13. <div class="parent">
  14.     <div class="child"></div>
  15. </div>
  16.  
CSS F1

 

And it results the following output:

Overflow and float 1

Now try to align the red box to the right using the float:right css syntax:

 

Code:
  1.     .child {
  2.         width:50px;
  3.         height:50px;
  4.         background-color: red;
  5.         float:right;
  6.     }
CSS F1

 

And the result is not what we probably want:

CSS overflow with float

We can solve this problem by using the overflow property on the parent element and set it to hidden like here:

 

Code:
  1. <style type="text/css">
  2.     .parent {
  3.         padding:5px;
  4.         background-color: #aaa;
  5.         overflow: hidden;
  6.     }
  7.     .child {
  8.         width:50px;
  9.         height:50px;
  10.         background-color: red;
  11.         float:right;
  12.     }
  13. </style>
  14.  
  15. <div class="parent">
  16.     <div class="child"></div>
  17. </div>
CSS F1

 

And now the result is what we want:

Correct layout with CSS overflow and float property

 

I hope this small description helps you to take advantage of the css overflow property opportunities.




Tags: CSS overflow propert, overflow property, css overflow, css, overflow

CSS overflow property explained - Table of contents
Step 1 - CSS overflow property


Host Addon Ltd
F1 Site Family
AJAX F1
CSS F1
Database F1
Flash F1
HTML F1
Java F1
JavaScript F1
PhotoShop F1
PHP F1
Scripts F1
Tutorial F1
Windows F1

Total time: 0.3327