0

I'm trying to create a grid with div elemtents and it looks like this at the moment:

enter image description here

"2" is bigger on purpose but when I make it bigger there is empty space on the left side of it and the other smaller blocks don't go there. My question is: How do I get the "5" to go to that empty space and 6 to 5, 7 to 6 etc. How do I get rid of that empty space?

Some code:

CSS:

.block
    position: relative
    float: left
    display: inline

HTML:

<div class='grid'>
        <div class='block block-1'><span>1</span></div>
        <div class='block block-2'><span>2</span></div>
        <div class='block block-1'><span>3</span></div>
        <div class='block block-1'><span>4</span></div>
        ....
</div>

Would I need javascript to do this or is there an HTML/CSS solution?

sanoj lawrence
  • 951
  • 5
  • 29
  • 69
Colin
  • 51
  • 1
  • 9
  • Maybe column-count could help you [link]( https://www.google.es/url?sa=t&source=web&rct=j&ei=97HTVMqsJIzYavyUgOAC&url=http://css-tricks.com/almanac/properties/c/column-count/&ved=0CCIQFjAC&usg=AFQjCNHp65ilNG4LwWEK3yK4WWOU6WB5qQ&sig2=oiht-g5u_SaHvPggNjYdaQ) – fcastillo Feb 05 '15 at 18:12
  • @fcastillo I've tried it but it doesn't make a difference.. I think because my blocks are a % width already. – Colin Feb 05 '15 at 18:38
  • 1
    you might wanna take a look at this post [http://stackoverflow.com/questions/11136286/css-float-empty-spaces][1] [1]: http://stackoverflow.com/questions/11136286/css-float-empty-spaces – imnancysun Feb 05 '15 at 18:45

1 Answers1

0

You can not do that using pure CSS and html. Jquery Mansory resolves this by complex mathematical evaluations of all elements.

Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82