6

So I have an UL in my website with around 30 list items, each list item contains an icon which is around 130px in width so the list extends into multiple rows.

The issue I am having is hard to explain so ill try using this jsfiddle. 

    ul { 
       display: table; margin: 10px auto; 
    }

    li { 
       float: left; list-style: none; margin-left: 5px; padding: 5px 0; 
    }
    li a { 
       background: #82B5DA; 
       border: 1px solid #599CCE; 
       border-radius: 3px; 
       padding: 5px; color: #333; 
       text-decoration: none; 
}

So what I want is for the space between each of those list items to be dynamic and make it so the list item that is far RIGHT touches the edge of the screen instead of a gap appearing until there is enough space for a new list item. Once there is enough room for another list item to go on that row, the width between the items is reset.

Resuming, turn this:

|[aaaaaaaaa][bbbbbbbbbb][cc]       |
|[dddddddddddddddddddbb][eeeee]    |

In this:

| [aaaaaaaaa]  [bbbbbbbbbb]  [cc] |
| [dddddddddddddddddddbb]  [eeeee]|

Hopefully that makes sense, new to posting here so apologies if this isn't correct in some way.

Ben Jackson
  • 11,722
  • 6
  • 32
  • 42
Dean Johnstone
  • 83
  • 5
  • Please confirm if my edit represents what you want. – cvsguimaraes Mar 15 '14 at 01:39
  • not sure how to confirm it unless you just mean replying but yes that does represent what I want! Thank you – Dean Johnstone Mar 15 '14 at 01:41
  • 1
    Just trying to get the question more readable. Hold on, perhaps someone can think in a pure CSS solution. – cvsguimaraes Mar 15 '14 at 01:44
  • 2
    Have you seen this? http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs/6880421#6880421 – wonce Mar 15 '14 at 01:49
  • The only issue with that wonce is that im not sure how you would code it to allow extra items underneath to fit into the bar once there is a certain amount of free space. I have also realised that the jsfiddle I linked was from before I edited it, now I know for next time you have to update it! The jsfiddle had around 30 list items in it but sadly im an idiot haha. But BYossarian's answer is perfect for what I need. – Dean Johnstone Mar 15 '14 at 02:05
  • Thanks for all the help to everyone who responded :) – Dean Johnstone Mar 15 '14 at 02:06

2 Answers2

2

As far as I know, it can be achieved only using javascript.

Try Isotope plugin. Minimized version is around 15kb.

https://github.com/desandro/isotope/blob/master/jquery.isotope.min.js

PrivateUser
  • 4,474
  • 12
  • 61
  • 94
  • Interesting plugin, doesnt seem to be the solution though looking at the demo page. But I will play around with this for sure to get an understanding of the animations used cause it looks very nice (I have only started learning HTML/JS/CSS very recently so every little helps :) ) – Dean Johnstone Mar 15 '14 at 02:00
2

If I understand what you're after, then you can use a flexbox:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

like so:

ul {
    display: flex;
    margin: 10px auto;
    padding: 0 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}

demo: http://jsfiddle.net/5grwG/19/

HOWEVER, support is currently fairly limited (http://caniuse.com/flexbox) so this only really works if you can find a decent polyfill, or are just looking to support the latest browsers.

Ben Jackson
  • 11,722
  • 6
  • 32
  • 42
  • This is perfect! Works just like I want as well. I am not too fussed about browsers as what im making is purely a prototype to show an idea, and will be shown in chrome. Thank you so much, time to start reading into this more. – Dean Johnstone Mar 15 '14 at 02:02
  • Didn't even know about this new display value. Very nice! – cvsguimaraes Mar 15 '14 at 02:02
  • This solution isn't listed in [this question](http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs/6880421#6880421). I'd recommend you to post this solution there too, that's a great answer. – cvsguimaraes Mar 15 '14 at 02:07