Home/ Questions/Q 8707097
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T03:46:57+00:00

I’m currently working on a design that requires multiple <DIV> elements sorted vertically but

  • 0

I’m currently working on a design that requires multiple <DIV> elements sorted vertically but also keeping its ability to be responsive.

Examples:

Wider layout

Wider layout

Taller layout

Taller layout

I’ve used floats, inline-block display and even resorted to crudely putting it together with jQuery but all elements sort horizontally.

Looking around I can’t seem to find any others with the same issue or solutions so any assistance would be great.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you’re not too concerned about cross-browser support (and just want to make it prettier in the compliant/up-to-date browsers), or are happy to use a JavaScript shim, of some kind, to enable support in other browsers, you could use column-width to define the width of the columns and then allow the browser to reflow those columns to accommodate the content:

    .gridbox {
    display: block;
    -webkit-column-width: 4em;
    -moz-column-width: 4em;
    -o-column-width: 4em;
    -ms-column-width: 4em;
    column-width: 4em;
    /* aesthetics, adjust to taste,
       only the above is important */
    margin: 1em auto;
    padding: 1em;
    border: 1px solid #f90;
    border-radius: 1em;
}

    JS Fiddle demo.

    Clearly I’ve used li and ul elements for the purposes of the demo, but this is directly transferable to div elements if you prefer. Simply style the parent/container in the same fashion as the above ul element, and style the child elements as you like.

    References:

    • 0