Posted by JWS on 04/25/07 08:44

I make "sidenotes" in a simple html page with the following css:

div#content {
margin-right: 22%;
}

..sidenote {
float: right;
clear: right;
margin: 0 -28% 1em 1em;
width: 25%;
}

Using this as follows:

<div id="content">
<p>(text of paragraph A)</p>
<span class="sidenote">(sidenote for paragraph B)</span>
<p>(text of paragraph B)</p>
</div>

This works quite well, for display and printing, both in IE 6/7,
and in Mozilla & derivatives. The outer rectangle represents the
"page":

+--------------------------------------------------------+
|+-----------------------------------+ |
|| | |
|| PARAGRAPH A | |
|| | |
|+-----------------------------------+ |
|+-----------------------------------+ +----------------+|
|| | | SIDENOTE FOR B ||
|| PARAGRAPH B | | ||
|| | +----------------+|
|| | |
|+-----------------------------------+ |
+--------------------------------------------------------+

But I want right-justified text (especially for printing), so I
add in css for div#content:

text-align: justify;

This also displays OK in the browsers mentioned, but when printing
with IE 6/7 I get:

+--------------------------------------------------------+
|+-----------------------------------+ |
|| | |
|| PARAGRAPH A | |
|| | |
|+-----------------------------------+ |
| +----------------+|
| | SIDENOTE FOR B ||
| | ||
| +----------------+|
|+-----------------------------------+ |
|| | |
|| PARAGRAPH B | |
|| | |
|| | |
|+-----------------------------------+ |
+--------------------------------------------------------+

Why does this happen? Any suggestions/tricks to fix this?

[Back to original message]