title: how do I get a new line, after using float:left?
body: <p>What I am trying to do is have rows of images, 6 images in each row.  Some of these images need to have another image floating on top of them (flush with the lower-right corner). I was able to get that to work from this thread:</p>
  
  <p><a href="https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html">How do I position one image on top of another in HTML?</a></p>
  
  <p>However, now I'm unable to get the new row after the 6th image. Neither <code>&lt;BR&gt;</code> or <code>&lt;P&gt;</code> create a new line. They simply push the next image down several pixels, but the image is still in the same line. It seems like the float style is interfering with the <code>&lt;BR&gt;</code> and/or <code>&lt;P&gt;</code>.</p>
  
  <p>I tried using different styles for the image that starts a new row, like <code>float:none</code> and <code>display:block</code>, but neither worked. The odd thing is that the new line starts <strong>after</strong> the 7th image. </p>
  
  <p>Here's what I'm using so far:</p>
  
  <pre><code>&lt;style type="text/css"&gt; 
  .containerdiv { float: left; position: relative; } 
  .containerdivNewLine { float: none; display: block; position: relative; } 
  .cornerimage { position: absolute; bottom: 0; right: 0; } 
  &lt;/style&gt;
  
  &lt;div class="containerdiv"&gt;
    &lt;img border="0" height="188" src="myImg" width="133" /&gt;
    &lt;img class="cornerimage" height="140" src="imageOnTop" width="105" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For the 7th image, when I'm trying to start a new row, I'm simply replacing the 'containerdiv' class with 'containerdivNewLine'.</p>