Q:

Create responsive masonry layout for text blocks or lists of varying lengths (heights)?

I believe this question has been asked in different ways by a number of different people.  I would like to create a page (or a div that works within a page) that contains text elements (paragraphs, lists, tables) that will be of unpredictable heights (ie. reflect user input, database content edits, etc.)...think of a newspaper layout...although horizontal flow from one element to the next would be acceptable. Fixed column-widths would be okay, but as I said, length/heights if each item would vary and change quite a bit.
I've been trying the various solutions like masonry, isotope, wookmark, freetile, etc. but have not yet had any success with these...and of course I would like to work with at least some pre-CSS3/pre-HTML5 browsers. Have any of you see any nice, clean efficient code that accomplishes such a thing?  Thanks for any suggestions/links.

A:

Okay; I found something that works pretty well.  Not perfect and I will have to noodle with it a bit to make it responsive to narrowing/expanding the page, but it's a start. It requires the ftcolumnflow script that I mentioned/linked in the comment above.
<html>
    <head>
        <script type="text/javascript" src="ftcolumnflow/src/FTColumnflow.js"></script>
            <style>
            body { margin: 0px; padding: 0; text-align: center;}
            p {text-align: left;}
            img {width: 100%;}
            #viewport { width: 950px; height: 400px; margin-left: auto; margin-right: auto;}
            #flowedContent, #fixedContent { margin: 0px; visibility: hidden; }
            body { font: 14px Helvetica,arial,freesans,clean,sans-serif; color: #333; font-size: 14px; line-height: 1.0; }
            a { color: #4183C4; text-decoration: none; }
            a:hover { text-decoration: underline; }
            a:active { outline: none; }
            ul {
                margin: 0px;
                padding-left: 0px;
                border: solid thin black;
                    }
            .listhead {text-align: left; color: white; background-color: #004000;}    
            li {
                line-height: 1.0;
                text-align: left;
                list-style: none;
                }
            li.c1 {
            background-color: #d6d6d6;
            }
            li.c2 {
            background-color: #ffffff;
            }
    </style>
    </head>

    <body>
        <div id="viewport">
        <div id="target"></div>
        </div>
        <div id="flowedContent">
        <p class="nowrap">Vestibulum gravida metus vel est vehicula porta ac a nisi. Integer eleifend leo non lectus sodales lacinia. Vestibulum consequat elit sit amet purus varius, id semper augue tincidunt. Quisque vestibulum, sem in imperdiet ultrices, quam arcu pretium mi, eget bibendum felis lacus convallis tellus. Ut id fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante ex, pharetra id consectetur in, molestie a arcu.</p>    
        <ul class="nowrap"><li class="listhead">group_1</li>
        <li class="c1"><a target=_blank href="link_1(1)">link_1(1)</a></li>
        </ul>
        <ul class="nowrap"><li class="listhead">group_2</li>
        <li class="c1"><a target=_blank href="link_2(1)">link_2(1)</a></li>
        <li class="c2"><a target=_blank href="link_2(2)">link_2(2)</a></li>
        <li class="c1"><a target=_blank href="link_2(3)">link_2(3)</a></li>
        <li class="c2"><a target=_blank href="link_2(4)">link_2(4)</a></li>
        <li class="c1"><a target=_blank href="link_2(5)">link_2(5)</a></li>
        </ul>
        <ul class="nowrap"><li class="listhead">group_3</li>
        <li class="c1"><a target=_blank href="link_3(1)">link_3(1)</a></li>
        <li class="c2"><a target=_blank href="link_3(2)">link_3(2)</a></li>
        <li class="c1"><a target=_blank href="link_3(3)">link_3(3)</a></li>
        </ul>
        <ul class="nowrap"><li class="listhead">group_4</li>
        <li class="c1"><a target=_blank href="link_4(1)">link_4(1)</a></li>
        <li class="c2"><a target=_blank href="link_4(2)">link_4(2)</a></li>
        <li class="c1"><a target=_blank href="link_4(3)">link_4(3)</a></li>
        <li class="c2"><a target=_blank href="link_4(4)">link_4(4)</a></li>
        <li class="c1"><a target=_blank href="link_4(5)">link_4(5)</a></li>
        </ul>

        <p class="nowrap">Vestibulum gravida metus vel est vehicula porta ac a nisi. Integer eleifend leo non lectus sodales lacinia. Vestibulum consequat elit sit amet purus varius, id semper augue tincidunt. Quisque vestibulum, sem in imperdiet ultrices, quam arcu pretium mi, eget bibendum felis lacus convallis tellus. Ut id fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante ex, pharetra id consectetur in, molestie a arcu.</p> 
        <ul class="nowrap"><li class="listhead">group_5</li>
        <li class="c1"><a target=_blank href="link_5(1)">link_5(1)</a></li>
        <li class="c2"><a target=_blank href="link_5(2)">link_5(2)</a></li>
        <li class="c1"><a target=_blank href="link_5(3)">link_5(3)</a></li>
        <li class="c2"><a target=_blank href="link_5(4)">link_5(4)</a></li>
        <li class="c1"><a target=_blank href="link_5(5)">link_5(5)</a></li>
        <li class="c2"><a target=_blank href="link_5(6)">link_5(6)</a></li>
        <li class="c1"><a target=_blank href="link_5(7)">link_5(7)</a></li>
        <li class="c2"><a target=_blank href="link_5(8)">link_5(8)</a></li>
        </ul>
        <ul class="nowrap"><li class="listhead">group_6</li>
        <li class="c1"><a target=_blank href="link_6(1)">link_6(1)</a></li>
        <li class="c2"><a target=_blank href="link_6(2)">link_6(2)</a></li>
        <li class="c1"><a target=_blank href="link_6(3)">link_6(3)</a></li>
        <li class="c2"><a target=_blank href="link_6(4)">link_6(4)</a></li>
        </ul>
        <ul class="nowrap"><li class="listhead">group_7</li>
        <li class="c1"><a target=_blank href="link_7(1)">link_7(1)</a></li>
        <li class="c2"><a target=_blank href="link_7(2)">link_7(2)</a></li>
        </ul>
        <p class="nowrap">Duis fermentum lorem suscipit arcu tincidunt, at consectetur mi euismod. Mauris ultrices diam ac lectus suscipit mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras luctus mauris odio, vel lobortis felis commodo vel..</p>
        </div>   

    <script type="text/javascript">
        var cf = new FTColumnflow('target', 'viewport', {
                columnCount:           3,
                standardiseLineHeight: false,
                pagePadding:           0,
        });
        cf.flow(document.getElementById('flowedContent'), document.getElementById('fixedContent'));
    </script>
    </body>
</html>

