Let me try and explain what I want to achieve. I want X boxes with a specific width (250 px) set but dynamic height to be placed in the body. But I want them to be as compact as possible, no unnecessary empty space between them.

Now If all boxes had same width and height, this would be easy. I could for example just put float:left; on them. But the when the boxes height is dynamic, and all boxes have random height I end up with spaces between the boxes.

Let me show two examples:

This is what I want:

This is what I end up with:

This is my CSS:

<style type="text/css">
<!--
body {
    background:#CCCCCC;
}
.flowBox {
    background:#FFFFFF;
    margin:10px;
    float:left;
    padding:10px;
    width:250px;
    border:#999999 1px solid;
}
.clear {
    clear:both;
}
-->
</style>

HTML example for a box:

<div class="flowBox">
   <h1>Header 0</h1>
   Erat volutpat. Sed rutr...
</div>

Full source code:

Is there a way to achieve this with CSS? Thanks for any help or directions!

Let me try and explain what I want to achieve. I want X boxes with a specific width (250 px) set but dynamic height to be placed in the body. But I want them to be as compact as possible, no unnecessary empty space between them.

Now If all boxes had same width and height, this would be easy. I could for example just put float:left; on them. But the when the boxes height is dynamic, and all boxes have random height I end up with spaces between the boxes.

Let me show two examples:

This is what I want:

This is what I end up with:

This is my CSS:

<style type="text/css">
<!--
body {
    background:#CCCCCC;
}
.flowBox {
    background:#FFFFFF;
    margin:10px;
    float:left;
    padding:10px;
    width:250px;
    border:#999999 1px solid;
}
.clear {
    clear:both;
}
-->
</style>

HTML example for a box:

<div class="flowBox">
   <h1>Header 0</h1>
   Erat volutpat. Sed rutr...
</div>

Full source code: http://pastebin.com/UL1Nqyvm

Is there a way to achieve this with CSS? Thanks for any help or directions!

• javascript
• html
• css
• css-float

9 Answers 9

From what I've seen before, what you want to achieve is hardly possible if not impossible with CSS only. What you want, basically, is a layout similar to Pinterest, you can check their website for a reference if you aren't sure what I am talking about.

From here, you can research a bit more into how Pinterest layout was done and if there are any alternatives - CSS Frameworks, jQuery Plugins and so on.

What I found for you from a short search with having the above in mind:

• Wookmark jQuery Plugin
• Masonry jQuery Plugin

Additionally, here is a short explanation by Evan Sharp who wrote the code for Pinterest layout:

I wrote the Pinterest script. Here's the base of how it works:

Beforehand: Absolutely position the pin containers Determine column width Determine margin between columns (the gutter)

Setup an array: Get the width of the parent container; calculate the # of columns that will fit Create an empty array, with a length equaling the # of columns. Use this array to store the height of each column as you build the layout, e.g. the height of column 1 is stored as array[0]

Loop through each pin: Put each pin in the shortest column at the moment it is added "left:" === the column # (index array) times the column width + margin "top:" === The value in the array (height) for the shortest column at that time Finally, add the height of the pin to the column height (array value)

The result is lightweight. In Chrome, laying out a full page of 50+ pins takes <10ms>

You can go from here by either researching into the topic even further with the slight guidance I have provided or if you are into coding, you could even make your own implementation of the above explanation.

It would be much easier to use the jQuery Plugins though, but if they suit your case that's only for you to decide.

You didn't achieve this with pure CSS you have to use this JS http://masonry.desandro.com/

I'm not sure, but I think you can get something like that with the "flexbox-layout" http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/

The problem is that it's something quite new and you may need broader support.

did you try http://masonry.desandro.com/?? It is based on jQuery

At least from what I know, this is impossible. CSS positioning works from left to right and then from top to bottom. So you can float left (or right) but not top.

So probably easiest is some scripting, and it should not be complicated:

1. Your structure should consists of div blocks, each 250px wide, and as many as fits. I would possibly create then in the window.resize handler:

   $(window).resize(function() 
   {
       // ... 
   }
   

2. Your original HTML can place all of your blocks into the first vertical block. Then in the same resize handler you can take the blocks and move them from the first into the next one. This is essentially a two-liner, looping through the elements, and doing something something like this:

   $("#FlowBox" + i)
       .appendTo("#VerticalBlock" + (i % number_of_vertical_blocks) );
   

CSS is then something like this:

.verticalBlock {
    background:#CCCCCC;
    margin:10px;
    float:left;
    padding:10px;
    width:250px;
    border:#999999 1px solid;
}
.flowBox {
    background:#CCCCCC;
    padding-top:10px;
}

great question! I tried this several times with different succes, and its not possible with just css. The only hint I can give you is: it's a packaging problem and there are jQuery scripts for that!

Try this and it may help you

HTML

<div class="left"> 
    <div class="flowBox">
            <h1>Header 0</h1>
             erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
    <div class="flowBox">
        <h1>Header 4</h1>
        am, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
</div>
<div class="left">
    <div class="flowBox">
            <h1>Header 1</h1>
            es vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
    <div class="flowBox">
        <h1>Header 5</h1>
        s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
</div>
<div class="left">
    <div class="flowBox">
            <h1>Header 2</h1>
            illa at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
    <div class="flowBox">
        <h1>Header 6</h1>
        eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
</div>
<div class="left">
    <div class="flowBox">
            <h1>Header 3</h1>
            ngilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
    <div class="flowBox">
        <h1>Header 7</h1>
         dolor sit amet, consectetur adipiscing elit. Sed magna ligula, fringilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
</div>
<div class="clear"></div>   

CSS

body {
        background:#CCCCCC;
}
.flowBox {
        background:#FFFFFF;
        margin-bottom:10px;      
        padding:10px;
        width:250px;
        border:#999999 1px solid;
}
.left { float:left;  margin:10px;}
.clear {
        clear:both;
}

And So on... In this you you may do that but it is not the right way. Or you have to use Javascript for this. Previously others have given you link already

You can do this with CSS3:

body {
-moz-column-count: 4;
-moz-column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
column-count: 4;
column-gap: 20px;
height: 800px; //breaks the column into new ones
}

But its only currently supported by firefox, safari and chrome (newer versions).

And it won't put it in the order you made it, it will put 0->1->2->3 in the first column rather than accross.

Using CSS selectors, it is possible to alter the 2nd and 3rd row divs, and it is possible to set them a new position, but it isn't possible to tell what the above div's position was, so you won't be able to move it in the right place unless you use javascript.

Consider this example:

body>div.flowBox:nth-of-type(5n) {
    /* alter position of every 5th flowBox */
    position: relative;
    top: -200px; /* how can you tell how much? */
}
body>div.flowBox:nth-of-type(6n) {
    /* alter position of every 6th flowBox */
}
/* and so on */
...

You can set the positions but you can't tell where to set it, because there is no way to get another elements properties. So for that you'll have to use javascript.

body {
          background:#CCCCCC;
     }

.outer-div{
           width:800px;
         }

your innver div

.flowBox {
           background:#FFFFFF;
           margin-bottom:10px;      
           padding:10px;
           width:250px;
           border:#999999 1px solid;
          }


.left  { float:left;  margin:10px;}
.clear { clear:both;}

html code:

<div class="outer-div">
<div class="left flowBox">
    <h1>Header 1</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
<div class="left flowBox">
    <h1>Header 2</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 3</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 4</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 5</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 6</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 7</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 8</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
</div>

try this, it will help you!