overflow

value: visible | hidden | scroll | auto | inherit
initial value: visible
inherited: no
percentages: N/A
applicable to: block containers

The overflow property specifies whether a block container element is clipped if it exceeds the element's outer box. The content, background and or image contain can be clipped to fit inside the box, visible beyond the box or a scrollbar will show for the visitor to scroll to the rest  of the content.

Example:

div.disclaimerA {overflow: visible}
div.disclaimerB {overflow: hidden}
div.disclaimerC {overflow: scroll}
div.disclaimerD {overflow: auto}

overflow: visible
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

overflow: hidden
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

overflow: scroll
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

overflow: auto
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

 

Values for the overflow property

visible: This is the default value. Content will appear outside the box if it exceeds the size of the box.

hidden: content will be hidden from view if is exceeds the size of the box.

scroll: content will be clipped, but a scroll bar will be provided to see the remained of the content. The scroll bar depends on the User Agent (browser).

auto: This depends on the browser's settings, but usually will provide a scroll bar if necessary.


overflow-x and overflow-y

There are two other properties that will determine if a scroll bar is shown. The property overflow-x will determine if a horizontal scroll bar is displayed. The property overflow-y will determine if a vertical scrollbar is displayed.

Example:

div.disclaimer {overflow: scroll; overflow-x: hidden;}

overflow: scroll; overflow-x: hidden
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.