Question

Please don’t consider my question as a duplicate. I just din’t succeed trying Display divs with different sizes with CSS

As suggested in the above post i used Masonry. But failed to get it worked. I am using codeigniter.

Here are the css i am using

#container {
    width:90%;
    margin:3% 0px 0px 10%;
}
.item {
    margin:10px 10px 10px 10px;
    float:left;
    width:240px;
    border:5px solid #f0f0f0;
    background-color:#d2dbde;
    border-radius:5px;
}

Javascript and js files

<!-- include js files -->
<script type="text/javascript" src="http://www.myappdemo.com/KarmakExpo/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.myappdemo.com/KarmakExpo/js/jquery.masonry.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#container').masonry({
        // options
        itemSelector : '.item'
    });
});
</script>

content

<div id="container">
    <div class="item">
        <div id="usericon" style="width:240px;height:30px;">
        <!-- content -->
        </div>
        <div id="name">
        <!-- content -->
        </div>
    <div>
    <a href="<?php echo $link; ?>">
        <img src="<?php echo $picture = ($picture == null) ? '' : $picture; ?>" width="240px" height="auto">
    </a>
</div>

I am displaying images,name,date etc in div section

Answer 1

Dynamic divs put in their place

JsFiddle – Demo (number of columns depends on width of document window).

Since it appears you have divs of regular widths, you might try something like this:

Note: Since first answering with this simple demo script, I have substantially altered the linked jsFiddle demo. It now barely resembles this code, but the basics are pretty much the same.

CSS kinda like this

div.column {
    display:inline-block; /* "Columns" should be only as wide as their setting, */
    vertical-align:top;   /* should sit next to each other horizontally, */
    width:240px;          /* and be vertically aligned. */
    height:auto;
    margin:10px 0px 10px 10px;
}
div.column div.row {
    width:240px;          /* All "row" divs are of the same width, */
    height:auto;          /* but of varying heights */
    margin:0px 0px 10px 0px;
    padding:0px;
    background-color:#00f0f0;
}

JavaScript kinda like this

(function () {
    var tdw = 240 + 0 + 10; // Div width + margin-left + margin-right
    window.addEventListener("load", function () {
        var ww = window.innerWidth, // how much width to play with?
            cn = Math.floor(ww / tdw), // how many columns will fit?
            cdl = [], // memory
            lc = 0, // alternation
            c = 0, // iteration
            ncd; // element object
        while (c++ < cn) {
            ncd = document.createElement("div"); // create columns
            ncd.setAttribute("class", "column"); // set their class
            document.body.appendChild(ncd); // add to page
            cdl.push(ncd); // remember them
        }
        c = 0;
        while (c++ < 100) { // this for demo // loop until there're no more
            ncd = document.createElement("div"); // create your divs
                // this could be where you add your div content
            ncd.setAttribute("class", "row"); // set their class
            lc = lc < cdl.length ? lc : 0; // alternate column as parent
            cdl[lc++].appendChild(ncd); // add the div to the column
            ncd.style.height = (200 * Math.random()) + "px"; // this for demo
                // or you could add the content via innerHTML
        }
    }, false);
}());​

This answer was put together whilst assuming a lot. With more detail in the question, I could have provided a more complete answer.

Since being asked to explain…

As I understand the question, it is to find a way to take dynamic information (extracted from where is irrelevant), and fill divs with it. Each of those divs is to be set on the page (presumably within a “feed” container or similar) in columns. Since the width of these (lets call them “infodivs”) infodivs is of a set width, we can create columns of fixed widths to contain them. Now the divs are free to be whatever height they need to be (according to the info they contain), and will simply stack up on top of each other, within their parent div.column.

On page load we measure the available width (in a live version accounting for offsets etc), and calculate how many columns will fit horizontally, then create those columns. To save reading and re-reading the DOM, we can store the columns to an array for easy look-up later.

After creating the columns, we are free to add the dynamically created infodivs to the columns, cycling through the column look-up array, utilizing each progressive column (left to right across the screen) for each new infodiv. Once we get to the last column, we set the look-up counter back to zero, and continue loading infodivs.

The method results in each column being filled with an approximately equal number of info divs (dependant on maths). There is however no check of the height of each infodiv, so any column could end up with much longer content than the others. A way around this would be to measure the height of each column as each new infodiv is created, then add that infodiv to the column which is shortest. This would result in columns remaining more closely equal in height.

Note: The demonstration jsFiddle connected to this answer now contains a rudimentary function to dynamically measure the column heights as infodivs are being created. In order to get an accurate reading of the column height(s), each image has a temporary onload listener attached which triggers the creation of the next infodiv. The listener is removed as soon as it’s done it’s job to free up resources. This method slows overall page loading, but not enough to be impractical. Depending on real circumstances, faster less accurate loading might be more desirable. In that case, discard the image’s onload listeners and create infodivs on demand regardless of the state of those previously created.

Further to dynamic measurement: The loading of large amounts of data and/or images (especially images) could be improved by the addition of an onscroll listener triggering a function to load new data (infodivs in this case) only when the visitor is scrolling toward the end of what they already see. This would serve to reduce server stress and increase browser response. Plus: there’s no point loading what the visitor may never scroll to look at.

So the code in pseudo terms is something like:

How wide is the screen?
Make (screen-width divided by column-width) columns.
While we have new infodivs being created, add them to the columns.
Don't add them all to one column, but shared them out equally.

The end result is dynamically created divs of info of equal widths, but varying heights, being laid out in a columnized fashion. Their natural tendency is to be as high up their parent as possible, so they’ll always be sitting just beneath the infodiv above them.

Since the columns have their display property set to inline, they’ll tend to sit side by side where there is space for them. A caveat is that if the width of the column’s parent is reduced (after the initial layout is created), the right-most column will be pushed below its fellow columns.

As for the PHP – That’s another story 🙂