Introduction

Making sidenotes in HTML is pretty tricky. Making them responsive is even trickier. Pretty much every method for making sidenotes has disadvantages. Some are bad, and some are absolutely terrible. Some leave extra space on certain device widths.

Some methods blend into the background color and borders of the element below them, which is really obnoxious. You can make it less obnoxious by assigning a white background to the sidenote, so that the sidenote overwrites the background color and borders of the following element instead of blending into it. However, this still leaves some mildly ugly artifacts, and it also hard-codes the background to white, which is a disadvantage if the visitor's browser defaults the background to something besides white. However, the latter disadvantage isn't quite as bad as it sounds, because very few people change their browser's default background color, and even the ones who do must put up with hard-coded background colors from almost every website, so letting the visitor choose a non-white background color is pretty much a lost cause anyway. These methods are covered in this document.

There's a <div> based method that works beautifully except at some widths just less than the foldover width, the text to the left of the sidenote has a too-big right margin. This method is covered in this document.

You can do a pretty good job of implementing sidenotes by using media queries. Unless the situation absolutely calls for media queries, with no viable alternatives, I personally stay away from media queries. Therefore, media query methods of implementing sidenotes aren't covered in this document.

Bad Methods Of Making Sidenotes

Let's get the bad sidenote construction techniques out of the way so we can move on to the practical ones.

By far the worst idea is to use a table to create a sidenote. Repeat after me:

Tables are ONLY for tabular material, and tables are not responsive!

This isn't as bad, but it's bad. A web search for HTML sidebar most often turns up advice to use <small> for sidenotes. Bad idea. <small> has historically been used to make the font smaller for each <small> encountered. Nothing about the word "small" implies a sidenote. It's very misleading. A much better idea is to use <span class="sidenote">, which exactly describes what's being done. I look forward to the day when <small> and it's big brother <big> are deprecated and then removed from the HTML standard.

It's possible to implement side notes by adding some Javascript. My opinion has always been you use Javascript only when needed, and there are plenty of ways to implement side notes without Javascript.

Now that we've dispensed with the bad methods, let's get down to some good ones...

Using <div class="presidenote"> and <div class="sidenote">

This sentence precedes the text with a sidenote. It's long enough to wrap at least one time with reasonable font sizes. Its purpose is to show the width of a normal paragraph above the material with the side note.

This is a paragraph with a background color. Notice that with the div method a side note longer than the text it's attached to does not overwrite this paragraph's background color. However, this method's single disadvantage is that when the sidenote folds under, the text it's attached to has a greatly exaggerated right margin. This exaggerated right margin is ugly, so this method is best used when the majority will be viewing it on a monitor sized screen. This method is less appropriate for mobile-first designs. The exaggerated right margin is caused by the max-width:70%; in the CSS, which is necessary to have it work at all.

<p>This sentence precedes the
text with a sidenote. It's
long enough to wrap at least
one time with reasonable font
sizes. Its purpose is to show
the width of a normal 
paragraph above the material
with the side note.</p>

<div class="presidenote"><p>This
is the first text paragraph 
contained inside <code><div
class="presidenote"></code>.
Often there's only one
paragraph to the left of
the side note.</p>

<p>This is a second paragraph
inside the <code><div
class="presidenote"></code>. 
Using this technique it's easy
to have one side note service
several paragraphs.</p>
</div>

<div class="sidenote">
<p>This is the first paragraph
inside the <code><div
class="sidenote"></code>
immediately following the
<code><div
class="presidenote"></code>
paragraphs.</p>

<p>This method is responsive
at all widths and
magnifications, and it doesn't
overwrite background colors of
what comes after it.</p>
</div>

<p class="backgroundcolor">This
is a paragraph with a
background color. Notice that
with the div method a side
note longer than the text it's
attached to does not overwrite
this paragraph's background
color. However, this method's
single disadvantage is that
when the sidenote folds under,
the text it's attached to has
a greatly exaggerated right
margin. This exaggerated
right margin is ugly, so
this method is best used when
the majority will be viewing
it on a monitor sized screen.
This method is less
appropriate for mobile-first
designs. The exaggerated
right margin is caused by
the <code>max-width:70%;</code>
in the CSS, which is
necessary to have it work
at all.</p>	

And the following is the corresponding CSS:

p.backgroundcolor{
background-color: #c0c; 
color: white; 
border 3px solid;
}

p.backgroundcolor code{
color: black;
}

div.presidenote,
div.sidenote{
display: inline-block;
margin: 0.5ex;
margin-left: auto;
margin-right: auto;
vertical-align: top;
max-width:70%;
margin-right: -6px;

vertical-align: top;
margin-top: -2ex;
margin-bottom: -1ex;
}

div.sidenote{
width: 10em;
border-left: 4px solid;
padding-left: 5px;
margin-left: 10px;
vertical-align: top;
margin-top: -0.2ex;
}
div.sidenote p{
font-size: 80%; 
line-height: 2ex; 
margin-top: 0.001px;
}

Side Notes Using Media Queries

Remember from the preceding section (Using <div class="presidenote"> and <div class="sidenote">), there were spacing problems and some ugly artifacts. It worked, but it could have worked better. One better way is by using Media Queries.

I'm trying to find the correct way to implement side notes, but it's very hard. VERY hard. What a hassile!

The implementation is done in CSS. I am really stoked about the ability to make sidenotes. I've been waiting a long time to be able to do it. But there are big problems with it overwriting my H1 elements.Although this once made the font temporarily smaller, which in my opinion is a very bad use of it, the modern use of <small> is to implement a sidenote.

Steve was here and now is gone.

This is a junk paragraph to see how following paragraphs handle the situation. These sidenotes tend to overwrite elements that are defined as 100% width.

Using Foldunder Divs