# Wrapping and Centering

In the early days of the web screens weren't very large, and people normally wanted text to run from edge to edge. If you code up HTML by hand, [with no styling](https://motherfuckingwebsite.com/), this is still what you'll get. As screens got larger, though, this could lead to lines that were too wide for easy reading. Sites have typically handled this by adding `width` or `max-width` styling to force wrapping, and then usually centering this column [as well](http://bettermotherfuckingwebsite.com/).

As an example of this evolution, lets follow `example.com` with the [Wayback Machine](https://archive.org/web/). Here's the earliest capture, from January 2002. No max-width, no centering:

[![](https://www.jefftk.com/example-com-earliest-capture.png)](https://www.jefftk.com/example-com-earliest-capture-big.png)

Around March 2002 they simplified the page dramatically (reduce serving costs?) but it's still not centered or limited:

[![](https://www.jefftk.com/example-com-simple-text.png)](https://www.jefftk.com/example-com-simple-text-big.png)

In January 2011 they made it redirect to an IANA page with wrapped and centered text:

[![](https://www.jefftk.com/example-com-on-iana.png)](https://www.jefftk.com/example-com-on-iana-big.png)

In July 2013 they stopped redirecting and switched back to a simple page with centered wrapped text:

[![](https://www.jefftk.com/example-com-modern-centered-wrapped.png)](https://www.jefftk.com/example-com-modern-centered-wrapped-big.png)

Most sites that are still served full-width today are ones that are no longer updated, like the [Original HTTP Specification](http://info.cern.ch/hypertext/WWW/Protocols/HTTP.html):

[![](https://www.jefftk.com/original-http-spec.png)](https://www.jefftk.com/original-http-spec-big.png)

Or [Sergey Brin's Academic Page](http://infolab.stanford.edu/~sergey/):

[![](https://www.jefftk.com/sergey-brin-home-page.png)](https://www.jefftk.com/sergey-brin-home-page-big.png)

The only major site I can think of that runs completely unwrapped is Wikipedia:

[![](https://www.jefftk.com/wikipedia-not-wrapped.png)](https://www.jefftk.com/wikipedia-not-wrapped-big.png)

Mobile Wikipedia, however, is wrapped, even on desktop:

[![](https://www.jefftk.com/mobile-wikipedia-is-wrapped.png)](https://www.jefftk.com/mobile-wikipedia-is-wrapped-big.png)

Once a site is wrapping, they need to decide where their text should fall. The two main options are "left-aligned" and "centered". All the sites above have chosen to center. Search engines are the main type of site I see today that doesn't center:

[![](https://www.jefftk.com/google-not-centered.png)](https://www.jefftk.com/google-not-centered-big.png)

[![](https://www.jefftk.com/bing-not-centered.png)](https://www.jefftk.com/bing-not-centered-big.png)

[![](https://www.jefftk.com/ddg-not-centered.png)](https://www.jefftk.com/ddg-not-centered-big.png)

I've always been somewhat [retrogrouch](https://www.jefftk.com/p/retrogrouch), but after spending some time with a wide monitor I've now I've come around on centering like I did on wrapping years ago. Yesterday I switched my main pages from left-aligned:

[![](https://www.jefftk.com/centering-posts-before.png)](https://www.jefftk.com/centering-posts-before-big.png)

To centered:

[![](https://www.jefftk.com/centering-posts-after.png)](https://www.jefftk.com/centering-posts-after-big.png)

Pages here that are not part of my [sorry excuse for a CMS](https://github.com/jeffkaufman/webscripts/blob/master/makerss.py) will still be left-aligned ([example](https://www.jefftk.com/donations)), at least for now.