Sidenotes using only CSS

Kewl technique!

Working in at least IE 5, Opera 8 and Mozilla. Haven't tested in other browsers. There's also a footnotes version, which requires some JavaScript.


External links with some information.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque fringilla nisl ac mi. Aenean egestas gravida magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sit amet lacus. Depends on how you look at it of course, but hey, just look at this lovely sidenote! Fusce nulla. Phasellus ligula leo, dictum et, molestie molestie, consectetuer et, lacus. Aenean tincidunt, pede non pharetra bibendum, turpis lacus venenatis est, nec lobortis augue felis quis eros. Donec elementum tempus turpis. Etiam diam velit, elementum et, mattis ac, eleifend et, turpis. Praesent malesuada augue id nunc. Suspendisse eget felis. Aliquam nec magna. Aliquam ac nibh eu eros cursus tristique. Proin suscipit sagittis lorem. In tempor purus ut eros.

Fusce lectus. Proin adipiscing elementum ante. Phasellus consequat. For more information; check out Google. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rhoncus pede nec pede. Ut sodales. Praesent sagittis. Aliquam dui magna, lobortis eu, adipiscing sed, sollicitudin eget, justo. Integer faucibus, libero et blandit luctus, libero nibh ultrices lectus, nec mollis mi mi sed quam. Mauris rhoncus ultrices enim. Aliquam ipsum quam, tempus sed, dapibus in, consequat et, orci.

Duis urna velit, dapibus id, semper eget, posuere non, justo. Nunc ipsum. Praesent lobortis. Nulla aliquet. Donec bibendum pellentesque tellus. Phasellus urna neque, elementum at, condimentum eget, auctor ut, quam. That's probably just not true. Phasellus dapibus interdum nunc. Duis a odio. In ut leo. In vel nisl. Donec leo. Mauris in leo. Integer gravida. Donec pretium nonummy pede. Proin in purus bibendum justo congue ultrices.

Donec sit amet leo interdum nisl scelerisque euismod. Pellentesque adipiscing bibendum ligula. Nam at nibh. In tempus mi eu urna. Duis faucibus semper ipsum. Nulla malesuada adipiscing metus. Ut eu pede. Integer vitae tellus. Nulla nec lorem eget purus auctor aliquam. Etiam lobortis. Donec sit amet purus. Aenean dui purus, viverra ut, lobortis eu, consequat sit amet, orci. Sed posuere felis vitae odio. Which is obvious. Quisque augue. Integer at nunc. Duis turpis ante, congue viverra, scelerisque sit amet, ornare ut, mauris. Phasellus gravida ullamcorper odio. Nunc tellus. Sed ligula erat, venenatis at, fringilla ut, mattis mollis, lorem.

Etiam ultricies. Etiam at nisl id ante auctor pretium. Proin vel erat a arcu luctus ultricies. Integer dignissim. Sed nonummy malesuada sapien. Quisque commodo ante at nisl. Sed accumsan enim non metus. Proin dignissim, leo ultrices rutrum laoreet, justo turpis interdum metus, nec elementum ligula nulla porta turpis. Maecenas mauris lorem, consectetuer sed, aliquam non, laoreet a, felis. Morbi egestas. Suspendisse at pede. Nullam at urna posuere est vulputate suscipit. Ut eu tellus. Donec bibendum turpis ac mi. Not always. Suspendisse imperdiet condimentum ante.

Fusce erat mi, rhoncus eget, dignissim a, consequat vitae, ligula. No. In pellentesque mauris id augue. Sure, that's what they all say. Vestibulum mi massa, accumsan eget, semper non, viverra at, risus. Mauris vulputate, tellus imperdiet malesuada vulputate, justo wisi posuere neque, quis luctus augue ligula ac lectus. Fusce egestas. Proin dui diam, commodo eu, gravida vel, condimentum non, dui. Morbi varius, eros eget dictum placerat, neque neque suscipit quam, eu rhoncus odio nunc blandit augue. Maecenas ac justo. Proin semper malesuada risus. Aenean felis.


Home - More stuff