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  lt BR gt  or  lt P gt  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  lt BR gt  and or  lt P gt    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    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    For the 7th image  when I m trying to start a new row  I m simply replacing the  containerdiv  class with  containerdivNewLine

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

you can also use    lt br style  clear both    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

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

Also such way   lt br clear  all    gt

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

Examples related to html

Examples related to css