Correcting Orphans w/ Overflow

Correcting Orphans w/ Overflow

Correcting Orphans w/ Overflow

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.

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.

CorrectingOrphanOverflow2

CorrectingOrphanOverflow2

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" />
<div>
    <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.

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>