4

I'm using bootstrap 3.1.1 - although that might be my irrelevant to my question.

I want to float <div> inside a container vertically, exactly like the behavior of windows icons on the desktop. If there are too many icons for 1 column, they should be pushed to anew column.

Is there a method to do this with CSS or do I need a javascript helper?

example

<div class='container'>

<div class='icon'> 1 </div>
<div class='icon'> 2 </div>
<div class='icon'> 3 </div>
<div class='icon'> 4 </div>
<div class='icon'> 5 </div>
<div class='icon'> 6 </div>

</div>

<style>
    .container{
        width:100%;
        max-height:200px;
    }
    .container.icon{
        width:50px;
        height:50px;
        /*..unknow !..*/
    }
</style>

thanks :)

CURRENT SOLUTION :

As i couldnt find any css solution. i wrote a littel js helper to do it i will share it here for future googler, let me know what you think

<div class='col-xs-9 stretch' id='desktop-icons'>
  <div class='row'>
    <div class='app-icon'>1</div>
    <div class='app-icon'>2</div>
    <div class='app-icon'>3</div>
    <div class='app-icon'>4</div>
    <div class='app-icon'>5</div>
    <div class='app-icon'>6</div>
    <div class='app-icon'>7</div>
  </div>
</div>


<script type="text/javascript">
  var icons=$('#desktop-icons >.row>.app-icon');
  var slice =icons.length
  var colMax=3;

  if(slice > 1){
    console.log('slicing '+slice+' icons'+'into pair of '+colMax);
    for(var i = 0; i < slice; i+=colMax) {
      console.log('wrapping '+(i)+','+(i+colMax));
      icons.slice(i, i+colMax).wrapAll("<div class='col-xs-2'></div>");
    }
  }

</script>
Community
  • 1
  • 1
Zalaboza
  • 8,899
  • 16
  • 77
  • 142

4 Answers4

1

Unfortunately it doesn't seem to be possible with pure CSS. Seems like a fun job for little jQuery plugin. Consider this sketch I coded:

$.fn.iconizer = function(options) {

    options = $.extend({
        selector: '.icon',
        marginTop: 10,
        marginLeft: 10
    }, options);

    return this.each(function() {

        var $container = $(this),
            $icons = $(options.selector, $container),
            containerHeight = $(this).height(),
            iconHeight = $($icons[0]).height(),
            iconWidth = $($icons[0]).width(),
            numberFit = Math.floor(containerHeight / (iconHeight + options.marginTop)),
            top = 0,
            left = 0;

        $icons.each(function(i) {
            if (i % numberFit == 0 && i > 0) {
                top = 0;
                left += iconWidth + options.marginLeft;
            }
            top = top + options.marginTop;
            $(this).css({
                top: top,
                left: left + options.marginLeft
            });
            top += iconHeight;
        });
    });
};

$('.container').iconizer();

It's pretty tiny and basic, feel free to extend it.

Demo: http://jsfiddle.net/Z5snv/

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • one small edit i made, was using of outerHeight and outerWidth for icons, and use of innerHeight for container, this make sure icons does not over lap, nor overflow. +1 great code – Zalaboza Feb 24 '14 at 14:46
  • Sure, there are probably much room for improvements. Feel free to adjust it. – dfsq Feb 24 '14 at 14:54
0

Try 

<div style="transform:rotate(270deg);">
  <div style="transform:rotate(90deg);">top</div>
  <div style="transform:rotate(90deg);">bottom</div>
</div>

http://jsfiddle.net/A5XKp/

Grim
  • 1,938
  • 10
  • 56
  • 123
0

for firefox/chrome/safari you can use pure css3

.container { column-count: 3; column-gap: 20px;}

This will create automatic 3 columns, 20px gap between them.
For IE, i know not.

andrew
  • 2,058
  • 2
  • 25
  • 33
  • thanks, yet this will divide container equally, this is not what im actually after. – Zalaboza Feb 24 '14 at 13:53
  • perhaps with a very long height you can achieve what you need. Else, i think you must find a js solution (althoug my css knowledge is not to advanced) – andrew Feb 24 '14 at 13:58
0

You can't, without javascript, force a content to fit a dynamic space like you need. However Andrew's reply it's a good solution if you "hack" first column with an image that fits your div for maximum height (edit w3c example: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-count adding after <div class="newspaper"> following code: <img src="hidden_marker_image.gif" height="500" width="1"><br>

column-count it's not supported by IE9 and lowers.

Of course if you don't know available vertical space you have you need at least a javascript that return this number ad assign to the hidden_marger_image proper size. However if you choose javascript a better solution needs to implement a "display: table" (table-row, table-cell) behaviour.

MrPk
  • 2,862
  • 2
  • 20
  • 26