Beau Hartshorne

Sidenotes With CSS

Buy The Visual Display of Quantitative Information by Edward Tufte.I was inspired to build sidenotes for the web after reading Edward Tufte’s design books. He suggests using sidenotes instead of footnotes because they are closer to the content you are referencing.

You can build sidenotes with absolute positioning. Set a parent block to position: relative; and make a sidenote class like this:

.sidenote {
  margin-right: -170px;
  position: absolute;
  right: 0;
  top: auto; /* default */
  width: 150px;
}

Sidenotes follow text.This works because absolute positioning removes the element from the document’s flow. The behavior of top: auto; is to position the top of the sidenote where it would have flowed as an inline element.

This is a leftnote!You can add leftnotes too:

.leftnote {
  left: 0;
  margin-left: -170px;
  margin-right: auto;
  right: auto;
}

I published this after reading the first edition of Eric Meyer’s CSS: The Definitive Guide. Anyone building web applications needs to study CSS, it is a powerful language and using it properly will keep your code short and application fast.