CSS: Stack elements vertically based on their height (column-wise)

Question

CSS: Stack elements vertically based on their height (column-wise)

Looking for some help with designing a menu where the list items float in columns instead of rows. For example,

This is how my current menu looks like:

I want to change the layout to look like this:

My code for the list items is as follows:

.mnu-third li  {
    width:150px;
    height:15px;
    display:block;
    float:left;
}

If the list items reach a certain height limit of the menu, they should start from the next column.

Please provide guidance...

EDIT : Here is my code Go to the top category and sub - sub categories...

html css

Answer 1

Answer №1

To easily create columns in your CSS for a list (ul), simply add the following code snippet and adjust the height as needed.

ul {
    height: 150px;
    -webkit-columns: 4; -moz-columns: 4; columns: 4;
}

<ul>
    <li>Item One</li><li>Item Two</li><li>Item Three</li><li>Item Four</li><li>Item Five</li>
    <li>Item Six</li><li>Item Seven</li><li>Item Eight</li><li>Item Nine</li><li>Item Ten</li>
</ul>

Answer 2

To easily create columns in your CSS for a list (ul), simply add the following code snippet and adjust the height as needed.

ul {
    height: 150px;
    -webkit-columns: 4; -moz-columns: 4; columns: 4;
}

<ul>
    <li>Item One</li><li>Item Two</li><li>Item Three</li><li>Item Four</li><li>Item Five</li>
    <li>Item Six</li><li>Item Seven</li><li>Item Eight</li><li>Item Nine</li><li>Item Ten</li>
</ul>

Answer 3

Answer №2

the following css should be utilized

ul {
    display: flex;
    flex-flow: column wrap;
    height: 150px;
    width: 150px;
}
li {
  display: inline-block;
}

Adjust the height and width to fit your needs.

http://jsfiddle.net/3orkpyoh/1/

Answer 4

the following css should be utilized

ul {
    display: flex;
    flex-flow: column wrap;
    height: 150px;
    width: 150px;
}
li {
  display: inline-block;
}

Adjust the height and width to fit your needs.

http://jsfiddle.net/3orkpyoh/1/

CSS: Stack elements vertically based on their height (column-wise)

Answer №1

Answer №2

Similar questions

Strategies for aligning a div element in the middle of the screen

Adding npm packages to your Vue.js application

What is the best way to display a particular section of a website (<td>...</td>) within a UIWebView?

Grid items in Material UI are not positioned next to each other

showing text style that is only specified on the server, not by the client

Active Tab Indicator - Make Your Current Tab Stand Out

Using HTML, CSS, and jQuery to create a master-detail feature

The Guide to Utilizing Autonomous Models in Directive

The Zurb Foundation grid system is causing issues when trying to implement vertical tabs

Ways to verify if an element includes a specific class in JavaScript

Submitting information to an HTML page for processing with a JavaScript function

What is the best way to use PHP strip_tags to filter out HTML and Script tags while keeping XML untouched?

The radio button element could not be located using the attribute "checked="Checked""

Hexagonal design reminiscent of a beehive

Enhance the appearance of the popover by incorporating an arrow-like element for dismissing the

What are some ways to customize the appearance of VueJS components?

Reading settings from web.config file in an HTML page

Struggling to align button text vertically in the center

Is there a way to turn off the ripple effect on Material UI Input components?

Can you provide me with instructions on how to create a toggle effect for a button using vanilla JavaScript?