title: Float figure - why does left go right and right go anywhere?
body: <p>Float left should be pretty simple: float the figure to the left. But instead of floating left, HTML5 randomly decides to maybe float left, maybe float right(ish), maybe neither.  What is it with figures floating any which way they want?</p>
  
  <p>My expected output is something like this:</p>
  
  <p><a href="https://s26.postimg.org/m3rtvlift/expected.png" rel="nofollow noreferrer"><img src="https://s26.postimg.org/m3rtvlift/expected.png" alt="like this"></a></p>
  
  <p>My actual output is something like this: </p>
  
  <p><a href="https://s26.postimg.org/buzcprue1/actual.png" rel="nofollow noreferrer"><img src="https://s26.postimg.org/buzcprue1/actual.png" alt="like this"></a></p>
  
  <p><em>(Yes, those examples do not have the same number of images. That is a mistake in creating the examples. It took me too long making them to go back and start again. The examples were meant to have the same number of images.)</em></p>
  
  <p>Here is the CSS code in the header: </p>
  
  <pre><code>    &lt;style&gt;
          figure.cover { float:left; margin: 0; padding-right: 10px; padding-top: 10px; padding-left: 0; width: 50%;}
          figure.cover img {float:left; width:100%;}
          figure.cover figcaption {text-align: center; font-style: italic;}       
          figure.left { float:left; margin: 0; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; padding-left: 0; width: 45%;}
          figure.left img {float:left; width:100%;}
          figure.left figcaption {text-align: center; font-style: italic;}
          figure.right { float:right; margin: 0; padding-right: 0px; padding-top: 10px;  padding-bottom: 10px; padding-left: 10px; width: 45%;}
          figure.right img {float:right; width:100%;}
          figure.right figcaption {text-align: center; font-style: italic;}           
          figure.center { display:block; margin-left: auto; margin-right: auto; width: 75%;}
          figure.center img { display:block; margin-left: auto; margin-right: auto; width: 100%;}
          figure.center figcaption {text-align: center; font-style: italic;}
      &lt;/style&gt;
  </code></pre>
  
  <p>And here is the HTML I'm using to render the images (repeated several times, obviously).</p>
  
  <pre><code>&lt;figure class="left"&gt;
      &lt;img src="image 2"&gt;
      &lt;figcaption&gt;
          Lorem Ipsum
      &lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure class="right"&gt;
      &lt;img src="image 3"&gt;
      &lt;figcaption&gt;
          Lorem Ipsum
      &lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>Attempted solutions:  </p>
  
  <ul>
  <li>Resizing images and substituting different files, to rule out specific images causing the problem somehow, </li>
  <li>adjusting padding above and below figures, </li>
  <li>inserting breaks after the right floated figure, </li>
  <li>nesting the paired figures into a figure.master element, </li>
  <li>adding display:block in the CSS for the img descriptions for the figure.right and figure.left classes, </li>
  <li>inserting overflow:hidden for the same, </li>
  </ul>
  
  <p>and a few other tinkerings I can't even remember at this point.</p>
  
  <p>Wrapping the right and left pairs in divs is NOT an option, as it would require a ground up rebuild of the entire site.</p>