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'.

User · Answer

Also such way   lt br clear  all    gt

User · Answer

you can also use    lt br style  clear both    gt

User · Answer

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

User · Answer

Another approach that s a little more semantic is to have a UL defined as your total 6 image width  each LI defined as float left and width defined - so that when LI  7 hits  it runs into the boundry of the UL  and is pushed down to the new row   You ll still have an open float that you ll want to clear after the  UL - but that can be done on the next element of the page  or as a clear div   Here s sort of the idea  you may have to mess with actual values  but this should give you the idea   The code is a little cleaner     lt style type  text css  gt   ul imageSet   width  600px  margin  0  padding 0    ul imageSet li   float  left  width  100px   height  188px  margin  0  padding 0  position  relative  list-style-type  none     cornerimage   position  absolute  bottom  0  right  0     h3 nextelement   clear  both     lt  style gt     lt ul id  imageSet  gt       lt li gt           lt img border  0  height  188  src  http   farm3 static flickr com 2459 3534790964 5d8bed17c0 jpg  width  100    gt           lt img class  cornerimage  height  140  src  http   farm4 static flickr com 3310 3514664446 08e9745681 jpg  width  50    gt       lt  li gt        lt li gt           lt img border  0  height  188  src  http   farm3 static flickr com 2459 3534790964 5d8bed17c0 jpg  width  100    gt           lt img class  cornerimage  height  140  src  http   farm4 static flickr com 3310 3514664446 08e9745681 jpg  width  50    gt       lt  li gt       lt li gt           lt img border  0  height  188  src  http   farm3 static flickr com 2459 3534790964 5d8bed17c0 jpg  width  100    gt           lt img class  cornerimage  height  140  src  http   farm4 static flickr com 3310 3514664446 08e9745681 jpg  width  50    gt       lt  li gt       lt li gt           lt img border  0  height  188  src  http   farm3 static flickr com 2459 3534790964 5d8bed17c0 jpg  width  100    gt           lt img class  cornerimage  height  140  src  http   farm4 static flickr com 3310 3514664446 08e9745681 jpg  width  50    gt       lt  li gt       lt li gt           lt img border  0  height  188  src  http   farm3 static flickr com 2459 3534790964 5d8bed17c0 jpg  width  100    gt           lt img class  cornerimage  height  140  src  http   farm4 static flickr com 3310 3514664446 08e9745681 jpg  width  50    gt       lt  li gt       lt li gt           lt img border  0  height  188  src  http   farm3 static flickr com 2459 3534790964 5d8bed17c0 jpg  width  100    gt           lt img class  cornerimage  height  140  src  http   farm4 static flickr com 3310 3514664446 08e9745681 jpg  width  50    gt       lt  li gt       lt li gt           lt img border  0  height  188  src  http   farm3 static flickr com 2459 3534790964 5d8bed17c0 jpg  width  100    gt           lt img class  cornerimage  height  140  src  http   farm4 static flickr com 3310 3514664446 08e9745681 jpg  width  50    gt       lt  li gt       lt li gt           lt img border  0  height  188  src  http   farm3 static flickr com 2459 3534790964 5d8bed17c0 jpg  width  100    gt           lt img class  cornerimage  height  140  src  http   farm4 static flickr com 3310 3514664446 08e9745681 jpg  width  50    gt       lt  li gt   lt  ul gt     lt h3 class  nextelement  gt Next Element in Doc lt  h3 gt

User · Answer

Try the clear property   Remember that float removes an element from the document layout - so yes  in a way it is  interfering  with br and p tags  in the sense that it would basically be ignoring anything in the main flow layout

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

The answer is

Examples related to html

Examples related to css

Tags