-1

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.

phc_joe
  • 103
  • 2
  • 14
  • Having some success with ftcolumnflow...but still not quite what I'm after. Seems to require a fixed display box. Does not re-flow with page resize. https://github.com/ftlabs/ftcolumnflow – phc_joe Nov 12 '14 at 16:03

1 Answers1

0

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>
phc_joe
  • 103
  • 2
  • 14
  • Note: the content such as the
      s of lists are generated on the fly by tapping MySQL with php. They will change from time to time with user/administrator input. A most helpful thing is the class="nowrap" that can be applied to paragraphs and lists so that they do not break between columns (when I don't want them to). Supposedly images can also be handled with this class but at the moment that does not seem to be working correctly for me.
     – phc_joe Nov 12 '14 at 19:56