Home/ Questions/Q 6177467
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:16:54+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!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.

    • 0