how do I get a new line, after using float:left?

Question

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:

How do I position one image on top of another in HTML?

However, now I'm unable to get the new row after the 6th image. Neither <BR> or <P> 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 <BR> and/or <P>.

I tried using different styles for the image that starts a new row, like float:none and display:block, but neither worked. The odd thing is that the new line starts after the 7th image.

Here's what I'm using so far:

<style type="text/css">  .containerdiv { float: left; position: relative; }  .containerdivNewLine { float: none; display: block; position: relative; }  .cornerimage { position: absolute; bottom: 0; right: 0; }  </style>  <div class="containerdiv">   <img border="0" height="188" src="myImg" width="133" />   <img class="cornerimage" height="140" src="imageOnTop" width="105" /> </div> 

For the 7th image, when I'm trying to start a new row, I'm simply replacing the 'containerdiv' class with 'containerdivNewLine'.

Answer 1

You need to "clear" the float after every 6 images. So with your current code, change the styles for containerdivNewLine to:

.containerdivNewLine { clear: both; float: left; display: block; position: relative; }  

Answer 2

you can also use

<br style="clear:both" />