Add "clear:right" to right-floating thumbnails, and "clear:left" to left-floating...

This solves a problem we've had for some time: Two right-floating images with too little text
between them cascade inwards into the middle of the page. Adding more text isn't a viable
solution because "too little text" is more and more text with increasing screen resolution. This
solves it elegantly, I think. Also, since the 'clear' is added only to the right-floating
elements, this does *not* push the text down and does *not* cause blocks of whitespace to occur.

diff --git a/stylesheets/monobook/main.css b/stylesheets/monobook/main.css
index eda7802..890da19 100644 (file)
--- a/stylesheets/monobook/main.css
+++ b/stylesheets/monobook/main.css
@@ -309,17 +309,19 @@ in the bottom-right corner of the content area */
 
 /* images */
 div.floatright { 
+    clear: right;
     float: right; 
     margin: 0;
-    position:relative;
+    position: relative;
     border: 0.5em solid White;
     border-width: 0.5em 0 0.8em 1.4em;
 }
-div.floatright p { font-style: italic;} 
+div.floatright p { font-style: italic; } 
 div.floatleft { 
+    clear: left;
     float: left; 
     margin: 0.3em 0.5em 0.5em 0;
-    position:relative;
+    position: relative;
     border: 0.5em solid White;
     border-width: 0.5em 1.4em 0.8em 0;
 }