Control of alignment with the CSS property overflow

The overflow property determines how will be displayed the contents of a box when it exceeds the limits thereof, and any display of a scroll bar.

This can happen when the width property limits the size of the box and its content exceeds that size. When absolute or negative positioning places the content out of the container. Or any other case.

Values of the property

visible

The content is displayed according to the normal flow and can exceed the container's rectangular shape. This is the default.

hidden

The content is clipped and the overlap is not displayed.

scroll

The content is clipped, but a scroll bar appears to allow to display it.

auto

A scroll bar appears only when the content is clipped.

inherit

The property value is the same as for the container.

Examples

Stylesheet:

.demo
{
  overflow:hidden;
}

JavaScript:

instance.style.overflow="hidden";

Vertical alignment

Containing blocks are assumed to have a rectangular shape, so that is out of alignment is overflow. In addition, which comes out of alignment is excluded from the display, but the content itself is not hidden, it is positioned in alignment.
The property overflow: hidden thus puts the content into the rectangular container, which is not the default.

The example below, which works with all browsers (Internet Explorer from version 7) show the effect of the property.

Grape

This is not a bunch of grapes.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc...

The source code

HTML in the first case:

<img src="https://www.xul.fr/images/orange.jpg" class="thumbnail" />
<div class="comment">
<h4>Orange</h4>
<p>
  This is not an orange (that's the picture of an orange).<br>
  Etc... 
</p>
</div>

The image is followed in the source code by a <div> to which is applied the stylesheet property overflow: hidden.

The CSS code:

.thumbnail 
{
 float: left;
 margin: 8px 16px 8px 4px;
}
.comment
{
  overflow: hidden;
}	

The image has the property float:left and a margin, no more.

The HTML code in a second case:

<img src="https://www.xul.fr/images/grape.jpg" class="thumbnail" />
<h4>Grape</h4>
<p class="comment">
  This is not a bunch of grapes.<br>
  Etc... 
</p>

<div> is not used here, the overflow property is applied directly to the paragraph and this produces the same result.

If the images have different widths, and you want to align the text on the same vertical line, you can specify a width for images in which case they will be resized to have all the same width.

Example:

.thumbnail 
{
 float: left;
 margin: 8px;
 width:260px;
}

Reference

• Visual effect in CSS 2.1.