Tutorials

Correcting Orphans w/ Overflow

Tags: Beginner, Quick Tip

The overflow property in CSS can be used in various ways and comes in handy when correcting bugs. Below are some tutorials that demonstrate how to clear up some common issues using the overflow property. After checking them out, I have one more to add to the list.

• The CSS Overflow Property – CSS Tricks
• The Overflow Declaration – Quirks Mode
• Clearing Floats – Quirks Mode

Got Orphans?

Below is an example of an Orphan in a paragraph which has an image floated to the left. This orphan is commonly seen when aligning a paragraph next to an image that exceeds its height.

This is where we can use overflow: hidden; to fix the problem. Add overflow: hidden; to your targeted <p> tag with CSS Specificity, or wrap the paragraph with a container that has overflow:hidden; applied to it.

As you can see, the paragraphs do not wrap around the floated image. Take a look at the HTML and CSS below for a demonstration.

HTML

<img src="your_image.jpg" class="thumb" />
<div class="description">
    <h3>Heading 1</h3>
    <p>Paragraph goes here...</p>
    <p>Paragraph goes here...</p>
</div>

CSS

.thumb {
    float: left;
    margin: 5px 20px 20px 0;
    padding: 5px;
    border: 1px solid #ccc;
    background: #f0f0f0;
}
.description {overflow: hidden;}

By adding overflow: hidden; to the .description container, you can now add a combination of elements without it ever wrapping around the floated image. Simple and clean, just the way we want it.

Have Any Tricks to Share?

If you know of any other tricks using the overflow property, I am interested in hearing about it. If you have any questions or concerns regarding this alignment trick, please let me know anytime.

Updates:

• 05/03/2010 – Make this work in IE6