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)

Answer 1

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.

 



    

        
        
    
     

        
        
    
    

        
        
    
    

        
        
    
    

        
        
    
    

        
        
    
    

        
        
    
    

        
        
    



Next Element in Doc