Reputation: 60021

Flow layout behavior using plain old HTML?

Using plain old HTML, how can I achieve a layout like this?

enter image description here

I've got 10-50 dynamic elements in an array, and I need to display them as shown.

If I just add all them to a container div, it goes left to right.

If each element is a div, they stack top to bottom, but never wrap to the next column.

How is this typically achieved using plain old HTML? edit I need this to work dynamically, e.g. if there maybe only be 2 items, or 50; I can't hard-code 3 <ul> lists.

Upvotes: 1

Answers (4)

Jason Gennaro

Reputation: 34855

In plain old HTML, you would use ordered lists and reset the lists for each column.

<ol>
    <li>.</li>
    <li>.</li>
    <li>.</li>
    <li>.</li>
</ol>

<ol start="5">
    <li>.</li>
    <li>.</li>
    <li>.</li>
    <li>.</li>
</ol>

Etc.

Then float the lists to the left.

Of course, this would not dynamically update.

EDIT

As per comment, you can do this dynamically with CSS3

div{
    column-count: 3;
    column-gap: 1em;
    column-rule: 1px solid black;
    -moz-column-count: 3; 
    -moz-column-gap: 1em; 
    -moz-column-rule: 1px solid black; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 1em; 
    -webkit-column-rule: 1px solid black;
}

http://jsfiddle.net/jasongennaro/3GSp6/1/

This is modern browsers only. Chrome, Firefox, Safari.

Upvotes: 1

Susam Pal

Reputation: 34224

<!DOCTYPE html>
<html>
<head><title>Test</title>
<style type="text/css">
.flow ul {
    float: left;
}

.flow li {
    list-style: none;
}
</style>
</head>
<body>
    <div class="flow">
        <ul>
            <li>Albany, 1324</li>
            <li>Albuquerque, 3456</li>
            <li>Baton Rouge, 4566</li>
            <li>Bellvue, 9856</li>
            <li>Catameran, 75696</li>
        </ul>
        <ul>
            <li>D SiteName, 1324</li>
            <li>E SiteName, 3456</li>
            <li>F SiteName, 4566</li>
            <li>SiteName, 9856</li>
            <li>SiteName, 75696</li>
        </ul>
        <ul>
            <li>SiteName, 1324</li>
            <li>SiteName, 3456</li>
            <li>SiteName, 4566</li>
            <li>SiteName, 9856</li>
            <li>SiteName, 75696</li>
       </ul>
   </div>
</body>
</html>

Or if you mean something without CSS when you say, "plain old HTML", you might want something like this but this is perhaps not something you want because it doesn't use the <div> element.

<!DOCTYPE html>
<html>
<head><title>Test</title>
<body>
    <table>
    <tr>
    <td>
        <ul>
            <li>Albany, 1324</li>
            <li>Albuquerque, 3456</li>
            <li>Baton Rouge, 4566</li>
            <li>Bellvue, 9856</li>
            <li>Catameran, 75696</li>
        </ul>
    </td>
    <td>
        <ul>
            <li>D SiteName, 1324</li>
            <li>E SiteName, 3456</li>
            <li>F SiteName, 4566</li>
            <li>SiteName, 9856</li>
            <li>SiteName, 75696</li>
        </ul>
    </td>
    <td>
        <ul>
            <li>SiteName, 1324</li>
            <li>SiteName, 3456</li>
            <li>SiteName, 4566</li>
            <li>SiteName, 9856</li>
            <li>SiteName, 75696</li>
       </ul>
    </td>
    </tr>
    </table>
</body>
</html>

You might also want to use lines terminated with <br> elements intead of <ul> and <li> elements depending on what you need.

Upvotes: 1