Always Include Widows and Orphans

What: Widows and orphans in CSS refer to leftover lines at the beginning or ending of a page, when you’re printing a website, or to the leftover lines at the beginning or ending of a column when you’re creating a multi-column layout.

How: You suggest the number of lines left on a page if a paragraph is split across a page or column. For example:

  h3 {
    orphans: 3;
    widows: 3;

Where: The article Orphans and Widows in CSS by Toby Osbourn on

Thoughts: Support is good across browsers, except, oddly, in Firefox, there is a 16 year old open bug report that got some attention two years ago and there doesn’t seem to be any reason why this hasn’t been implemented, except that it just hasn’t. I have to say I’m disappointed in my favorite browser.

On a more personal note, I came across this in one of my own stylesheets for a website I hadn’t spend any time on in the last two / three years and I have no memory of putting them in. I had to look up what it was.

Good article on multi-column layout by Rachel Andrew can be found at Smashing Magazine.

And if you want to read a bit more about using columns as a masonry gallery of sorts, you can read CSS Columns Across Browsers

Photo of Haystack Rock at Pacific City, Oregon by me

Leave a Comment