DailyDev: Fixing Orphans With CSS

June 6, 2010

DailyDev series thumbnail logo -- day fourFor my next DailyDev, I’m working on cloning ProPublica’s ChangeTracker mashup to track changes to the campaign websites of Maryland’s governor and his challenger.

To make sure it works and to have something to show, I’m waiting for the pages I’m monitoring to be updated. So, I’m in a holding pattern on that.

In the meantime, here’s a simple CSS technique I used to get rid of orphans in a blog post on my portfolio site.

If you don’t know what orphans are, have a look at the screengrab below:

Screengrab of blog post with orphans at the end of list items.

You got it, the orphans are the last lines of each list item. Not pretty, right? Fortunately, I happened upon this CSS tutorial showing how to use the overflow property to get rid of them.

Following the tutorial, I wrapped each of the problem list items in a new div with the id “noOrphans,” like this:

<div id="noOrphans">
<li class="blogItem">
<strong>Here's the scoop: You can't scoop yourself:</strong>
Stop thinking in terms of print versus Web, us versus them. Start thinking in terms of one multi-platform news organization. To promote this culture, get your print/broadcast and Web staff interacting and crossing over into each other's roles.
</li>
</div>

I then created a new CSS rule for that div setting the overflow property to hidden, like this:

#noOrphans {
	overflow: hidden;
}

See, I said it was simple. Here’s the

Finished Product

Screengrab showing blog post with orphans corrected.

  • I could have accomplished the same thing with a class rule, but, as you can see from the HTML, I already had a class applied to the list items.

Pros

  • Really simple to do.
  • Can be accomplished with minimal extra markup.

Cons

  • If every other list item or paragraph requires an orphan-canceling div or class, your markup will start to get cluttered.

Tip

  • If you have lots of orphans, tweak your design and leverage the CSS cascade to keep your markup clean. In my example, for instance, if most of my list items had orphans, I might consider increasing or decreasing the padding or margins of their parent elements, or just forget about having the text wrap so each list item automatically squares off.

Recommend?

  • Yes.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: