Organizing list items into vertical columns

Could you help me with UL/LI syntax and how to create a wrapping list? For example, I would like to display:

1 2 3 4 5 6

As:

1 4
2 5
3 6

Currently, I have a header, content, and footer all set with specified heights. I want the list to wrap when it reaches the footer or the bottom of the content %.

My goal is for the content div to adjust its size dynamically based on screen capacity. If there are 12 items and the screen accommodates 2 columns, it should display as 2 columns with 6 rows; if the screen fits 4 columns, then 4 columns with 3 rows, and so forth.

Answer №1

Initially, this may seem impractical... however, it surprisingly does yield results... though its effectiveness is limited to specific scenarios and involves a plethora of eccentric numbers. Not exactly adaptable. FIDDLE (just a heads up, browser resizing required)

HTML

<ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
</ul>

CSS

/* implementing a natural box layout model for all elements */
* { -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
    padding: 0; margin: 0;
    width: 4em;
    border: 1px solid orange;
    overflow: hidden; /* alternative to clearing float */
}

ul li {
    position: relative; /* necessary for negative top distance to function */
    display: inline-block;
    border: 1px solid red;
    width: 2em;
    height: 2em;
    float: left;
    clear: left;
}

ul li:nth-of-type(n+4) {
    float: right;
    clear: none;
    top: -6em;    
}


@media (min-width: 30em) {

    ul {
        width: auto;
        float: left;
    }

    ul li {
        float: left;
        clear: none;
        border: 1px solid green;
    }

    ul li:nth-of-type(n+4) {
       float: left;
       top: 0;
    }

} /* =========== end === */

I'm inclined to believe there's likely a graceful jQuery solution for this... Unless your table isn't dynamically filled with varying information - you could opt for aesthetic adjustments like these or resort to absolute positioning - columns might be the more viable choice. Best of luck...

Answer №2

To enhance the layout of your list, consider utilizing CSS columns and applying a basic styling approach as shown below:

ul {
   column-count: 2;
   /* additional styles */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying Image from Jquery Ajax Response

I have a PHP script that can resize images with specified dimensions by passing the width and height as variables like so: resize.php?width=100&height=200. The content-type of this PHP script is set to image/jpg. Additionally, I have an HTML page wher ...

Icon overflowing due to Bootstrap 4 card title

I'm currently working on implementing an expand/collapse feature with a red close 'X' button in a Bootstrap 4 card. I've almost got it working, but when I try to place the red close icon outside the element that controls the expand/coll ...

Sticky box fails to maintain position as header scrolls

I am looking to create a Sidebar that sticks to the window while scrolling, but stops when it reaches the footer. I have managed to get it partially working, but there is a small issue that I can't seem to solve. Test it live here: Everything seems ...

Ways to prevent the selection of images

Whenever I click on the ball, a click event is triggered. However, sometimes it doesn't work because I accidentally select the image and it interrupts the click event. I attempted to remove the selectable property using the following CSS properties, ...

Update the information within an HTML element upon clicking a menu option

Is there a way to dynamically load the content of various HTML files into a specific element on my index.html page when different menu links are clicked? This would help avoid duplicating menus across multiple HTML files and make maintenance much easier. ...

Utilizing a jQuery plugin for input file validation

This code is functioning properly, however the file field is not being validated. All input fields are successfully validated by this plugin except for the file type field. I believe there may be something missing in my implementation, so please help me de ...

Imagine a webpage with a width of 1000 pixels. Can you determine the precise horizontal position (from the left) of the div element with the unique id of "inner_div"?

Hello everyone, I hope you're doing well. I recently took a test and unfortunately got this question wrong. Imagine a web page with a width of 1000px. What is the exact horizontal (from the left) position of the div element with id "inner_div"? < ...

HTML/Javascript/CSS Templates: Keeping Tabs on Progress

I'm looking for templates that use notepad as an editor for html/javascript/css. I want to find a template that displays text or pictures upon clicking, like the example below: Sorry if this is a silly question, it's been 8 years since I last di ...

Placing a gradient background in front of two divs

I have created two divs with gradients: .container_middle_page{ margin: auto; height: 100%; display: flex; flex-direction: column; } .container_middle_page_up{ background-image: linear-gradient(to top, #F28118,white); height: ...

How to properly set margins for button components in Material UI

I'm working with a centered Toolbar in Material UI that consists of 3 components, each being a button. My goal is to add some margin around each button. I attempted to use the {mt} option within the component button, but didn't see any changes re ...

Malfunctioning JavaScript timepiece

I am currently experimenting with using Raphael to create a unique clock feature on my website. My goal is to animate the seconds hand to mimic the movement of a traditional clock. Below is the code snippet I have implemented: window.onload = function( ...

BeautifulSoup: A guide on retrieving information following a designated HTML element

I have the following HTML code and I am trying to determine how to instruct BeautifulSoup to extract the <td> data after the element <td>Color Digest</td> <tr> <td> Color Digest </td> <td> 2,36,156,38,25,0, ... ( ...

The angular component cannot be bound as it is not recognized as a valid property

In an attempt to conditionally assign a class based on the value of a boolean variable, I have declared the variable in the parent component: public alteredSidebar: boolean; This is my approach for dynamically setting the classname: <div [class ...

Slider Adjusts Properly on Chrome, but Not on Firefox

Visit this URL This link will take you to the QA version of a homepage I've been developing. While testing, I noticed that the slider on the page works perfectly in Chrome and IE, but has layout issues in Firefox where it gets cutoff and moved to th ...

Form tag definitions are missing on the login page

Here is a snippet of code I am using: <%= form_tag :action => 'process_login'%> Username: <%= text_field "user", "fullname" %>&#x00A; Password: <%= password_field "user", "password" %>&#x00A; <%= submit_t ...

What causes the device pixel ratio to vary across different web pages on the same device and operating system?

I am curious about why device pixel ratio varies between different websites and operating systems. For instance, when using the same device, this site displays a different pixel ratio on Windows compared to Ubuntu. On Windows, the pixel ratio is 1.34 whi ...

Using JQuery to create animations with fadeIn and fadeOut effects is a great way to

As a complete newbie taking my first steps in front-end development, I spent most of my day trying to work out an animation function but couldn't quite get it right. Below are the snippets of HTML, CSS, and JavaScript codes: <!DOCTYPE html> < ...

Calculating the Load Time for a Web Page in C#

Is there an easy method for measuring the time it takes for a web page to fully load after hitting Enter? Do I need to utilize a Timer, or are there functionalities within the Web Browser control (or .net framework) that I have overlooked? Appreciate any ...

Using ReactJS to search for and replace strings within an array

A feature of my tool enables users to input a string into a textfield and then checks if any words in the input match with a predetermined array. If the user's string contains a specific name from the array, I aim to replace it with a hyperlink. I&a ...

Enhancing CSS to create a more visually appealing loading spinner

I am completely new to CSS and I've been attempting to customize the CSS in the angular-loading-bar module to create a more visually appealing loading spinner. Currently, I have a square spinner that rotates in the center of the page, with a black bor ...