HOLLA TECH - LEARN

The overflow Property
 

As discussed earlier, every element on the page is a box. If the height of the box is not set, the height of that box will grow as large as necessary to accommodate the content.

The HTML:

<div>
This text is inside the div element, which has a blue
background color and is floated to the left. We set a specific
height and width for the div element, and as you can see,
the content cannot fit.
</div>

 

The CSS: 

div {
  width: 150px;
  height: 150px;
  background-color: LightBlue;
  float: left;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
The CSS overflow property specifies the behavior that occurs when an element’s content overflows the element’s box.

The overflow Property Values
 

There are four values for the overflow property: visible (the default value), scroll, hidden, and auto.

The value scroll results in clipped overflow, but a scrollbar is added, so the rest of the content may be seen.

The CSS: 

div {
   width: 150px;
   height: 150px;
   background-color: LightBlue;
   float: left;
   overflow: scroll;
}

 

Result: 

Holla Tech - Learn CSS


Auto and hidden

auto – If overflow is clipped, a scroll-bar should be added to make it possible to see the rest of the content.
hidden – The overflow is clipped, and the rest of the content will be invisible.

The CSS:

div {
   width: 150px;
   height: 150px;
   background-color: LightBlue;
   float: left;
   overflow: hidden;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
The default value for the overflow property is visible.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT