The problem of unordered list content being broken when using multi-column CSS

I've encountered an issue with my CSS where multiple ul sections are automatically split into three columns, but the li content is breaking and moving to the next column individually. I want the entire ul to move to the next column as a whole. Here's a screenshot of the problem.

The desired result should look like this.

Here's my HTML code:

<div class="columnsmulti">
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<ul>
<li>Lorem Ipsum123</li>
<li>Lorem Ipsum123</li>
</ul>
<ul>
<li>Lorem Ipsum456</li>
<li>Lorem Ipsum456</li>
<li>Lorem Ipsum456</li>
</ul>

</div>

And here's my CSS:

.columnsmulti {
    -moz-column-count: 3; 
    -moz-column-gap: 10px;
    -moz-column-rule: 3px double #666;
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px;
    -webkit-column-rule: 3px double #666;
    column-count: 3;
    column-gap: 10px;
    column-rule: 3px double #666;
}

Any ideas on how to achieve this?

htmlcss

Answer №1

Utilizing the column-break guidelines in css is recommended. Take a look at this Chrome example:

.columnsmulti ul {
    -webkit-column-break-inside: avoid;
    -webkit-column-break-after: always;
}

Incorporate these rules into your css and it should meet your expectations.

Check out this Reference for more information.

P.S.: It seems that -moz-column-break is not supported by my Firefox browser.

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

Whenever a tab is refreshed, the page will automatically redirect to the first tab

When using the application below, if the user is not in Tab 2 or Tab 3 and clicks on refresh, the page automatically goes to Tab 1. Is there a way to prevent this behavior and keep the user in their current tab after refreshing? Any suggestions on how to ...

htmlcssrshiny

Why isn't the AngularJS injected view resizing to fit the container?

As a novice delving into a project in the MEAN stack, I'm encountering inconsistent HTML previews. When I view it independently versus running it from the project, the display varies. Here's the intended appearance (in standalone preview): imgu ...

javascripthtmlcssangularjs

Having trouble getting Bootstrap to function correctly on an HTML page

I am facing difficulty in identifying the issue. I have replaced the body content with that of another website, which works perfectly fine. However, despite trying to initialize bootstrap elements through both relative paths and CDN, they are not showing u ...

htmlcsstwitter-bootstrap-3

Fetching data from a DIV element

I am trying to figure out how to assign a value from a div tag (6.897882999999999, 79.92221100000006) to a PHP variable using the div's id. Can anyone help me with this? Thank you. <form id="mainForm" method="post" action=""> &l ...

phphtmltags

Is your Scrollmagic failing to function once your website is uploaded to the server?

My website incorporates Scrollmagic to dynamically load sections (changing opacity and adding movement) as users scroll through it. Everything functions perfectly fine when I preview the HTML file on my computer, but once I uploaded it to my hosting serv ...

javascripthtmlcssscrollmagic

How can I use Wicket to dynamically change a component's className when a button is disabled?

Let's consider the following example: <span class="button4"> <button wicket:id="saveButton" type="submit"> <wicket:message key="modalArchiveAccount.button.save" /> </button> </span> When working with java cod ...

javascripthtmlwicket

Retrieving input from an HTML form using iterations in PHP

I'm currently in the process of designing a webpage that features a form with 16 questions. Each row of input is structured as follows: <li>*question 1*</li> <input type="text" name="answer1" style="height: 40px;" size="50" dir="rtl"&g ...

phphtmlformspost

How can I determine if a user has reached the end of a non-scrollable div by utilizing HostListener and directives within Angular?

In my Angular project, I have designed a main layout using flex display with specific height and overflow settings. The main content div inside this layout has its own unique styling to ensure consistent appearance for any components inserted within it. By ...

htmlangularscrollangular2-directives

Why is it proving difficult to eliminate margin and padding from the top of the page?

Struggling to remove padding or margin from the top, I attempted to adjust the main container settings: margin-top:0px !important; padding-top:0px !important; Unfortunately, this did not have the desired effect. The code is too lengthy to include in thi ...

htmlcss

Tips on customizing the navigation bar color in Bootstrap

Is there a way to update the CSS in Bootstrap 4 to customize the color of the navbar? I'm having issues with my code. Can you take a look at it? <nav class="navbar navbar-expand-lg navbar-dark bg-transparent"> <div class="container"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Tips for enabling an element to exceed the bounds of a scrollable container

I am facing an issue with my menu where it has grown in size, making it necessary to have a scroll function for easier navigation. I have successfully implemented the scrolling feature. However, within this menu is a submenu that should extend out to the ...

javascripthtmlcssdrop-down-menuscroll

The CSS star rating system is malfunctioning

I'm struggling to implement a rating star system in my project. I have experimented with various code snippets, but none seem to be functioning properly. Take a look at the outcome: https://i.sstatic.net/g3DvH.png ...

javascriptangularjstwitter-bootstrapcss

Is it possible to modify the flex direction in Bootstrap based on specific breakpoints?

I am currently utilizing Bootstrap 4 for my project. I have a div that is styled with "d-flex" and it is meant to display as a row at the "lg" breakpoint (screens 1200px and above). However, on smaller devices such as mobile phones at the "sm" or "xs" brea ...

cssbootstrap-4flexbox

Having trouble locating the search bar element on Walmart's website?

I'm currently working on a bot that needs Selenium to interact with the search bar on Walmart's website, where it will input the name of a specific product and perform a search. However, I've encountered an issue where no matter what method ...

javascriptpythonhtmlseleniumweb-scraping

Struggling with aligning Bootstrap 5 navbar items to the right while keeping the brand on the left side?

I'm struggling to align the items to the right on my navbar. No matter what I try, they just won't budge from the left side next to my brand logo. Here's the code I'm working with: <nav class="navbar navbar-expand-lg navbar-dar ...

htmlcssnavbarbootstrap-5

Is there a way to customize the color of the highlighted stars in a jQuery rating plugin?

Utilizing a jquery plugin, I have successfully implemented a star rating feature sourced from this location. The stars are appearing as intended, but upon selection, the default color is red. This selected color is specified in the .rateit .rateit-selected ...

htmljquerycss

Tips for changing the order of a child element within a parent element that is positioned above its own parent element

I have a unique setup with two parent elements, one black and one red. Each parent element contains its own child element - the black parent has a gray div child, while the red parent has a pink div child. There are some constraints to consider: I am no ...

htmlcss

Challenges of positioning two div elements next to each other without adhering to the width of the container

Apologies for my limited knowledge of CSS and HTML; I am relatively new to this. I have gone through various questions and tutorials on how to align two divs side by side, but I seem to be facing difficulties in controlling the width of the divs in my cod ...

csshtmllayoutcss-float

The clearfix method seems to be ineffective when dealing with elements positioned absolutely

I have a div with position absolute and float left and right. I am trying to add an image below this div. The issue I am facing is that the image is overlapping with the first div. I want the image to be displayed below the first div without any overlap. ...

htmlcss

Handling the display of divs using two select elements

I've been pondering this problem for a while now, and I'm starting to believe that there may not be a solution. Essentially, what I am trying to achieve is the ability to select options from two dropdown menus which will then show or hide specifi ...

javascripthtmljquery