In Firefox, right floated elements vanish when utilizing columns

Utilizing the ol element with column-count and column-gap properties to organize the list into 2 columns, each list item contains a span element floated right. However, I am encountering an issue where the span element is not displayed for certain items like 3 and 4 in the image provided below.

View the Firefox column floated right problem image here

.list {
  column-count: 2;
  column-gap:60px;
}

.close {
  float: right;
}
<ol class="list">
  <li>Test 1
    <span class="close">&times;</span>
  </li>
  <li>Test 2
    <span class="close">&times;</span>
  </li>
  <li>Test 3
    <span class="close">&times;</span>
  </li>
  <li>Test 4
    <span class="close">&times;</span>
  </li>
  <li>Test 5
    <span class="close">&times;</span>
  </li>
</ol>

My browser of choice is Firefox Quantum 58.0.2 (64bit). I have also tested on the latest versions of Chrome, Edge, and Opera which are functioning correctly.

htmlcssfirefox-quantum

Answer №2

It appears to be a bug in my opinion. I can think of two possible solutions:

If the number of list items is odd, add an additional list item

Here's a workaround that may help:

.list {
  column-count: 2;
  column-gap: 60px;
}

.list > li:last-child {
  visibility: hidden;
}

.close {
  float: right;
}
<ol class="list">
  <li>Test 1
    <span class="close">&times;</span>
  </li>
  <li>Test 2
    <span class="close">&times;</span>
  </li>
  <li>Test 3
    <span class="close">&times;</span>
  </li>
  <li>Test 4
    <span class="close">&times;</span>
  </li>
  <li>Test 5
    <span class="close">&times;</span>
  </li>
  <li></li>
</ol>

Opt for absolute positioning

In my view, this is a more effective solution:

.list {
  column-count: 2;
  column-gap:60px;
}

.list > li {
  position:relative;
}

.close {
  position: absolute;
  right: 0;
}
<ol class="list">
  <li>Test 1
    <span class="close">&times;</span>
  </li>
  <li>Test 2
    <span class="close">&times;</span>
  </li>
  <li>Test 3
    <span class="close">&times;</span>
  </li>
  <li>Test 4
    <span class="close">&times;</span>
  </li>
  <li>Test 5
    <span class="close">&times;</span>
  </li>
</ol>

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

Is there a way to verify the existence of an element based on its class name?

In the title of my question, I mentioned that my element lacks an id attribute. So how can I determine if it exists or not? Here is the HTML code: <div class="classname">something</div> Note1: If there was an id attribute like this: var el ...

javascriptjqueryhtml

The <nav> and <section> elements are not appearing on the page

Website: CSS: Hello there! I am experiencing an issue where the nav and section elements are not displaying on my website. They seem to only show the height and background-color attributes. Interestingly, they appear correctly on my old Firefox version ( ...

csshtmlnav

Uninterrupted jQuery AJAX calls

I have a scenario where I need to periodically update an image on my view using ajax every 10 seconds. Any suggestions on how I can achieve this? Appreciate the help. ...

phpjavascriptjqueryhtml

Hide the scroll bar in html/css while keeping the functionality of the arrows intact

Is there a way to remove the scroll bar but still be able to access overflown data using arrows? Any assistance would be greatly appreciated. Thank you in advance. ...

javascriptjqueryhtmlcss

Issues with IE9's CSS hover functionality are causing problems

This particular css style functions well on most browsers, but seems to have compatibility issues with Explorer 9 specifically when it comes to the :hover effect. There are instances where it works perfectly fine and other times when it doesn't work a ...

htmlcssinternet-explorer-9

What is the best way to eliminate the blue color from a Boostrap 5.3 accordion item when it is opened?

As shown in these two images, I am looking to remove the blue color and blue border when opened: https://i.sstatic.net/vOIna.png https://i.sstatic.net/7eLfK.png <div class="accordion-item"> ...

htmlcssbootstrap-5

Nightwatch failing to locate element within iFrame

I'm currently facing a challenge when trying to access an element within an iframe. Despite successfully switching to the frame, Nightwatch keeps returning "element not found" whenever I attempt to verify its presence or visibility. Below is a snippe ...

javascriptcssiframenightwatch.js

Tips for adjusting the angle in SVG shapes

I have designed an svg shape, but I'm struggling to get the slope to start from the middle. Can someone please provide assistance? <svg xmlns="http://www.w3.org/2000/svg" fill="none"> <g filter="url(#filter0_b_1_2556)"&g ...

javascripthtmlcsstypescriptsvg

Unable to dial phone numbers when clicking 'Click to call' link on Android devices

Within my Cordova android application, I have a link set up like this: <a href = "tel:011123456789">Click to Call</a> While this click-to-call functionality works smoothly in IOS, it seems to be hindered in Android by an issue such as: 11- ...

javascriptandroidhtmlcordova

Tips for utilizing CSS container queries in conjunction with the Material-UI framework

I'm looking to implement CSS container queries with MUI. In my code, I want to change the background color to red if the parent width is less than 300px. Check out the sandbox const StyledItem = styled("div")(({ theme }) => ({ border: ...

javascriptcssreactjsmaterial-uicontainer-queries

Parsing JSON data repeatedly using JavaScript within an HTML environment

The following code I found on a popular web development website works perfectly: <!DOCTYPE html> <html> <body> <h1>Customers</h1> <div id="id01"></div> <script> var xmlhttp = new XMLHttpRequest(); var url ...

javascripthtmljson

Hovering over graphics for automatic scrolling

I have successfully implemented a hover effect that scrolls down an image inside a div. However, I am facing an issue with making the scroll longer for images of varying lengths by using calc inside the transition property. Below is the code snippet that ...

csshovercss-transitionscss-animationstransition

Upon loading, the Carousel is visible instead of being hidden, which is contrary to its intended behavior

Any help would be greatly appreciated as I am struggling with creating a web page featuring tabs for "London, New York, Shanghai". The initial page displayed is the "welcome" page with the other tabs hidden on load. I successfully implemented a carousel f ...

javascripthtmlcsstailwind-cssdisplay

Vanishing Submenus

I'm experiencing an issue with my navbar and its drop-down menus. When I hover over the submenu, it doesn't stay visible as expected. I've tried different approaches such as using jQuery, the + operator in CSS, and even creating a separate h ...

javascripthtmljquerycss

Ways to implement multi-file loading on a website using separate HTML segments

Currently, I am working on a website for my local community. Each page contains similar content like header, navigation bar, and footer. I want to streamline this process by storing these common elements as separate HTML files. Is it possible to link the ...

html

What is the best way to prevent URL modification in Angular?

Currently, I am working on a project with a specific page (let's call it localhost:XXXX/notification-page) and we want this to be the only URL that can be accessed. Any attempt to change the URL should redirect users back to the notification-page. As ...

htmlangularweb

Expanding the clickable area of a link using the CSS :before pseudo-element selector

I am currently working on a project involving an image slider and I am facing a challenge with the "previous" and "next" arrows. My goal is to have each arrow occupy half of the slider area, but adjusting padding or margins tends to change their position o ...

htmlcssz-index

Using HTML and CSS to create a display-table for laying out a form

Working on a dynamic HTML/CSS layout that simplifies the process by using classes like form, row, cell label, and cell input to control elements (width, alignment, etc.). I decided to utilize display: table along with its child elements table-row and tabl ...

htmlcssforms

The HTML form is not displaying any content and instead is returning "Not a Number

I've been struggling to create a form that can generate a numerical value based on the input from two fields. Specifically, I need to calculate the output by subtracting the product of two values - one entered in an input field and another selected vi ...

htmlformscalculation

Organize your information starting from the left and moving to the right

Currently, I am engaged in a project where I need to retrieve commands and showcase them on a screen. However, there seems to be an issue as the commands are appearing one by one and automatically moving down to the footer. What I actually want is for th ...

phphtmlcss