Shifting <li> to adjacent column

Here is the HTML code I am working with:

<div style="column-count: 3;">
    <ul>
        <li><h3>Education<h3></li>
        <li><a>Education 1</a></li>
        <li><a>Education 2</a></li>
        <li><a>Education 3</a></li>
    </ul>
    <ul>
        <li><h3>Careers<h3></li>
        <li><a>Careers1</a></li>
        <li><a>Careers2</a></li>
        <li><a>Careers3</a></li>
    </ul>
    <ul>
        <li><h3>Legal<h3></li>
        <li><a>Legal</a></li>
        <li><a>Legal</a></li>
        <li><a>Legal</a></li>
    </ul>
</div>

The code above organizes the 'ul' elements into 3 columns. The image linked below helps visualize this setup:

https://i.sstatic.net/rikph.jpg

In the screenshot, we see that 'Education' appears in the bottom of the first column, causing its anchor tags to shift to the next column. To address this issue and move 'Education' to the next column when needed, is there a CSS or JavaScript solution available?

javascriptjqueryhtmlcss

Answer №1

A clever workaround, not entirely semantic but effective, was inspired by a specific post. The solution involves wrapping each h3 and its subsequent a in a container element and applying the style of display: inline-block.

To maintain the list's appearance as normal and avoid it looking like a nested list, additional styles need to be added. This approach successfully prevents headers from splitting across columns. If a div containing an h3 and the following a would typically break across multiple columns, setting these elements to display: inline-block ensures this doesn't happen.

/* the important part */
ul li ul li div h3,
ul li ul li div a {
  display: inline-block;
  width: 100%;
}

/* aesthetics */
ul li ul {
  list-style: none;
  padding-left: 0;
}
ul li ul li {
  list-style-type: disc;
}
div {
  background-color: lightgray;
  max-height: 150px;
}
<div style="column-count: 3;">
  <ul>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>
      <ul>
        <li>
          <div>
            <h3>Education</h3>
            <a>Education 1</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Education 2</a></li>
    <li><a>Education 3</a></li>
    <li><a>Education 4</a></li>
    <li><a>Education 5</a></li>
    <li><a>Education 6</a></li>
  </ul>
  <ul>
    <li>
      <ul>
        <li>
          <div>
            <h3>Careers</h3>
            <a>Careers1</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Careers2</a></li>
    <li><a>Careers3</a></li>
  </ul>
  <ul>
    <li>
      <ul>
        <li>
          <div>
            <h3>Legal</h3>
            <a>Legal</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Legal</a></li>
    <li><a>Legal</a></li>
  </ul>
</div>

Comparison:

/* the important part */
/*ul li ul li div h3,
ul li ul li div a {
  display: inline-block;
  width: 100%;
}*/

/* aesthetics */
ul li ul {
  list-style: none;
  padding-left: 0;
}
ul li ul li {
  list-style-type: disc;
}
div {
  background-color: lightgray;
  max-height: 150px;
}
<div style="column-count: 3;">
  <ul>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>
      <ul>
        <li>
          <div>
            <h3>Education</h3>
            <a>Education 1</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Education 2</a></li>
    <li><a>Education 3</a></li>
    <li><a>Education 4</a></li>
    <li><a>Education 5</a></li>
    <li><a>Education 6</a></li>
  </ul>
  <ul>
    <li>
      <ul>
        <li>
          <div>
            <h3>Careers</h3>
            <a>Careers1</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Careers2</a></li>
    <li><a>Careers3</a></li>
  </ul>
  <ul>
    <li>
      <ul>
        <li>
          <div>
            <h3>Legal</h3>
            <a>Legal</a>
          </div>
        </li>
      </ul>
    </li>
    <li><a>Legal</a></li>
    <li><a>Legal</a></li>
  </ul>
</div>

(Please note that the code snippets address the issue of improperly closing h3 tags.)

Answer №2

When incorporating bootstrap, it is possible to place every list inside a div and give each div a col-xs-4 class. However, if bootstrap is not being used, an alternative approach could involve mimicking the grid system.

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

Mastering Typing for Enhanced Order Components using Recompose and TypeScript

I have been working on integrating recompose into my react codebase. As part of this process, I have been experimenting with getting some basic functionality to work. While I have made progress, I am uncertain if I am following the correct approach for usi ...

javascriptreactjstypescriptrecompose

Managing JSON data files in an Express application

I'm facing a challenge with file upload using express.js. I currently have this mongoose schema: { title: { type: String, required: true, min: 1, max: 1024, }, whatToRead: [{ type: String }], questions: [ { question: { ...

javascriptnode.jsexpressmulter

Access the variables created in a jQuery function from other functions for easy referencing

One of the challenges I'm facing is with a jQuery function structured like this: (function($){ $.fn.myjqfunction = function(cfg){ var foo1, foo2; return this.each... }; })(jQuery); I am seeking advice on how to expose foo1 and ...

javascriptjqueryjquery-plugins

Is it safe to set content type as text/plain instead of application/json for JSON response?

I've been developing a PHP script to retrieve public JSON data, which will be accessed by JavaScript on the client side. However, I've encountered an issue with the server (LiteSpeed shared hosting) not having brotli/gzip compression enabled for ...

javascriptphpjsoncontent-type

Flowing seamlessly from one element to the next

I experimented with some jQuery code for a multi-step form, but I'm facing some glitches in the transitions. When I navigate back and forth between steps 1 and 2, everything seems fine. However, when I try to go from step 1 to step 3 and then reverse ...

javascriptjqueryjquery-ui

How to limit character input in a Div using Angular 2

I need some guidance on Angular 2 with TypeScript. I want to apply a validation rule to a "Div" element where the maximum length should be set to 100 characters. Additionally, even when text is copied and pasted into the Div, it should not exceed 100 chara ...

htmlangularcopy-paste

CSS — The flexbox layout does not support the use of margin-left and margin-right properties

My index.html layout in a desktop window screen involves using flexbox to have two div elements in one row, a long div element in the second row, and two div elements in the third row, with one containing a list. I want spacing between the div elements in ...

htmlcssflexboxmargins

Assigning administrator privileges with connect-roles and Passport.JS

I've been struggling to create an admin role for accessing a simple admin page following the documentation provided by connect-roles. I'm currently retrieving the admin status from the database and storing it in a global variable, but I'm un ...

javascriptnode.jsexpresspassport.js

Adding a new row within a table using jQuery at the center position

I am trying to add a new row at the beginning of a table right after the header row. The prepend() method is not working as expected because it inserts the new row before the header. Additionally, the after and before methods are also not giving me the des ...

jquery

The speed of JQuery Datatable decreases significantly when handling images

The plugin's script being used: <script src="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script ...

jqueryajaxperformancedatatabledatatables

Steps to dynamically adjust the height of a slick carousel

Currently, I am experimenting with the slick carousel for testing purposes. In my setup, I have manually set the height of the slides: <div class="slides"> <div>slide a</div> <div>slide b</div> <div>slide c& ...

jquerycssslick.js

Display Google spreadsheet column values on an HTML page

Looking to create a notification page on my Google Sites using data from spreadsheet cells. Here's a sample of HTML code from W3 CSS Tabs: W3 CSS Tabs Can someone assist me in inserting cell values into the <P> tags? https://i.sstatic.net/jk1u ...

htmlgoogle-apps-scriptspreadsheet

Expanding the content width of Bootstrap Nav Pills

I'm currently working with Bootstrap pills that feature two tabs. I would like to customize the width of the tab content container differently for each tab, but I'm unsure how to achieve this. The tab-content class currently sets the same width f ...

csstwitter-bootstrapbootstrap-5nav-pills

Retrieving data and selecting tables using jQuery

Currently, I have an HTML table displaying various available times for scheduling purposes. My goal is to allow users to click on a specific time slot and retrieve both the column header (staff person's name) and the value of that cell (the time). Aft ...

javascriptjquery

Is it possible to reorganize several divs for mobile screens?

My setup is quite intricate. I have a layout with 2 rows consisting of three divs each on larger screens. It looks something like this: <div class="row row-1"> <div class""square">square 1</div> <div class"&qu ...

htmljquerycss

Using Vue.js to iterate over a list of items and accessing specific array objects by their unique identifier

My JSON array of objects has the following structure: https://i.sstatic.net/1IUVE.png When generating a <ul>, I need to fetch an ID from an API for each <li>: <ul> <li v-for="genre in movie.genre_ids"> {{ genre }} ...

javascriptvue.jsvuejs2vue-componentv-for

Learn how to manipulate Lit-Element TypeScript property decorators by extracting values from index.html custom elements

I've been having some trouble trying to override a predefined property in lit-element. Using Typescript, I set the value of the property using a decorator in the custom element, but when I attempt to override it by setting a different attribute in the ...

javascripttypescriptpolymerlit-elementlit-html

multiple divisions in the center

I am struggling with centering 2 divs, each containing 3 nested divs wrapped around a big main div. The code I have written is as follows: <div stye="margin-left:auto; margin-right:auto; width: 1210px;"> <div id="left" style=" float:left; width ...

csshtml

The SVG image created is not appearing on the screen

I'm working on a JavaScript project to display SVG elements, but I'm encountering an issue with the "image" element. For some reason, when I create the image element dynamically, it doesn't appear in the browser. However, if I manually copy ...

javascriptsvg

Exploring Angular 2 Application Testing: Tips for Interacting with HTML Elements

In my Angular 2 Frontend testing journey, I came across a blog post ( ) where the author utilized ng-test TestBed for core testing in Angular. While the example provided was helpful for basic understanding, it lacked details on how to manipulate Elements. ...

javascriptangularkarma-jasmine