Code: http://jsfiddle.net/tRRtY/
<!DOCTYPE HTML>
<html>
<head>
<title>$$ float</title>
<script
type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default">
</script>
<style type="text/css">
p {
background: lightblue;
}
span.dollar {
float: right;
background: maroon;
color: white;
}
</style>
</head>
<body>
<h1>Example 1</h1>
<p class="math">
\[
(a + b)^2 = a^2 + 2ab + b^2
\]
<span class="dollar">$$</span>
</p>
<p>Foo</p>
<h1>Example 2</h1>
<p class="math">
\(
(a + b)^2 = a^2 + 2ab + b^2
\)
<span class="dollar">$$</span>
<p>Foo</p>
</body>
</html>
In the first example, I see the the $$ text floated beside the second paragraph. However, I want it to be floated beside the first paragraph. How can this be done?
As I explain in my answer on the MathJax user’s forum, the solution is to put
between the
<span class="dollar">$$</span>and the</p>that follows. That forces the paragraph to continue to the end of the floating element before the next paragraph starts.