Correctly, if somewhat brusquely, noted, JSWolf: Xhtml does not permit div inside p, though it did show up correctly in Chrome.
This minor modification is however considered valid by the w3c validator:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p.footnote {display:inline;
margin-right:-0.1em;}
div.footnote+p.footnote { margin-left:0.5em;}
div.footnote {
display:inline-block;
border-style:solid;
border-width:1px;
background:yellow;
width: 0.6em;
height:0.6em;
overflow:hidden;
position:fixed;
}
div.footnote:active {width:auto;height:auto;}
div.footnote p{
font-size:0.5em;
margin:0 0.2em;
}
div.footnote p+p{ font-size:0.9em;}
</style>
</head>
<body>
<p class="footnote">Sic transit gloria mundi.Click on this footnote.</p><div class="footnote">
<p>1</p>
<p>Isn't it fun reading through all the footnotes?</p>
</div><p class="footnote">
Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>
<p>Credo Elvem ipsum etiam vivere.</p>
</body>
</html>