CSS Block float left

Question

I have this html file

    

        1
    
    


        
      

Answer 1

The basic issue you have is that CSS float works in a way that is different to how you want it to work.

Another answer to your problem might be to use Javascript to hack it.

There is a jQuery plug-in called Masonry which looks like it does what you're after. You can use float:left; for everything, and then use Masonry to close up the gaps.

It would mean relying on a solution that isn't entirely CSS-based though, which probably isn't ideal - especially since I've already given you a working CSS-only solution.

(also once you start using Javascript, you definitely need to fix your id vs class problem -- Javascript will disown you if you have all those elements with the same id)