user26270 user26270 - 1 month ago 236
CSS Question

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

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 Source

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; }