how do I get a new line, after using float:left?
- by codeman73
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:
http://stackoverflow.com/questions/48474/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'.
