Enhanced Firefox functionality with support for multiple columns

It has come to my attention that Internet Explorer 9 and older versions do not support multiple columns. However, even with the latest version of Firefox, I am experiencing issues with this website loading correctly. Do you have any insight into what might be causing the problem with multiple columns?

Here is a CSSDesk showcasing the code snippet:

body {
  background: url(http://subtlepatterns.com/patterns/scribble_light.png);
}
#wrapper {
  width: 90%;
  max-width: 1100px;
  min-width: 800px;
  margin: 50px auto;
}
#columns {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  column-count: 3;
  column-gap: 15px;
  column-fill: auto;
}
.pin {
  display: inline-block;
  background: #FEFEFE;
  border: 2px solid #FAFAFA;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  margin: 0 2px 15px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 15px;
  padding-bottom: 5px;
  background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
  opacity: 1;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
.pin img {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 5px;
}
.pin p {
  font: 12px/18px Arial, sans-serif;
  color: #333;
  margin: 0;
}
@media (min-width: 1110px) {
  #columns {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}
@media (min-width: 1200px) {
  #columns {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }
}
#columns:hover .pin:not(:hover) {
  opacity: 0.4;
}
<div id="wrapper">
  <div id="columns">
    <div class="pin">
      <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.
      </p>
    </div>

    <div class="pin">
      <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
      <p>
        Donec a fermentum nisi.
      </p>
    </div>
    
    ... more HTML content here ...
    
  </div>
</div>

cssfirefoxresponsive-designmultiple-columns

Answer №1

To enhance the layout, delete the column-fill attribute with all its vendor prefixes.

Here are the attributes to remove: 

  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;

HTML content remains the same. 

body {
  background: url(http://subtlepatterns.com/patterns/scribble_light.png);
}
#wrapper {
  width: 90%;
  max-width: 1100px;
  min-width: 800px;
  margin: 50px auto;
}
#columns {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  column-count: 3;
  column-gap: 15px;
}
.pin {
  display: inline-block;
  background: #FEFEFE;
  border: 2px solid #FAFAFA;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  margin: 0 2px 15px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 15px;
  padding-bottom: 5px;
  background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
  opacity: 1;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
.pin img {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 5px;
}
.pin p {
  font: 12px/18px Arial, sans-serif;
  color: #333;
  margin: 0;
}
@media (min-width: 960px) {
  #columns {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}
@media (min-width: 1100px) {
  #columns {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }
}
#columns:hover .pin:not(:hover) {
  opacity: 0.4;
}
<div id="wrapper">
  <div id="columns">
    <div class="pin">
      <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.
      </p>
    </div>

    <div class="pin">
      <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
      <p>
        Donec a fermentum nisi.
      </p>
    </div>

    <div class="pin">
      <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
      <p>
        Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.
      </p>
    </div>

    <!-- Rest of the pins included here for brevity -->

  </div>
</div>

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

Tips on how to align a wrapper-div in the center without affecting the positioning of the

I am looking to keep my page perfectly centered in the browser without affecting the content (similar to how align-text: center works). Specifically, I want to center my wrapper-div. How can I achieve this? Here is a simplified version of my current page ...

htmlcsspositioning

What is the best way to ensure a jQuery function runs on duplicated elements?

I have been attempting to construct a webpage featuring cascading dropdowns using jQuery. The goal is to generate a duplicate set of dropdowns when the last dropdown in the current set is altered. I aim for this process to repeat up to 10 times, but I cons ...

javascriptjqueryhtmlcssclone

Tips for positioning a label at the top of a table row in an asp.net C# application

I am facing an alignment issue in my asp.net page with a table that contains a label and a textbox. Despite trying various methods, the label consistently displays at the bottom of the row. How can I ensure that the label is aligned to either the center or ...

c#htmlcssasp.netcode-behind

Is there a way to center the text at 0% using text-align in Bootstrap?

My progress bar, designed with Bootstrap, currently displays the text in a way that is not centered as desired. The issue I am experiencing is that the "0/0" text shifts to the left and using text-align: center; does not seem to resolve this alignment pro ...

htmlcsstwitter-bootstrap

Override current website to display the mobile version

Few limitations to consider. Dealing with Sharepoint 2013, which can cause some issues from time to time. Hopefully won't affect the outcome. Unable to modify the viewport meta tag for the site. The website is a preexisting large site that was ...

csswebbootstrap-4

"Vanishing Act: Bootstrap menu vanishes after a click

Having difficulties with the menu on my website wrapster.sebastianbialek.pl. Whenever I resize the browser to mobile version and click on the collapse button, the menu shows up briefly and then disappears. Any assistance in resolving this issue would be gr ...

jquerycsstwitter-bootstrap

jQuery automatic slider for seamless transitions

I am in need of assistance with the coding for a website I'm currently constructing at www.diveintodesign.co.uk/ChrisMcCrone/index.html The coding being used is sourced from http://jquery.malsup.com/cycle/ The central large image functions as a slid ...

javascriptjqueryhtmlcss

Embedded tweets may occasionally lose their borders when viewed on various web browsers

My goal is to showcase a collection of responsive embedded tweets in rows of 2. Here are the key elements of the code that have enabled me to achieve this: HTML <div id="tweets"></div> <script src="https://platform.twitter.com/widgets.js" ...

javascripthtmlcsstwitter

Is there a way to produce a unique color using Stylus CSS?

Currently, I'm utilizing Express for Node.js and Stylus as the CSS engine. While Stylus is great, I'm facing some challenges in passing color variables or generating random colors. Despite attempting to use the javascript API for stylus, I find m ...

javascriptcssnode.jsexpressstylus

Issues with CSS Min-Height in Various Web Browsers

Lately, I've been working on a website and trying to create a border that surrounds all my content and extends the full length of the page. The #Container div is supposed to expand to fill the entire page. I've tried using min-height:100%; in my ...

htmlcss

Looking to adjust the background-image size of a table cell (td) upon clicking a specific

I have a website where I would like to display logos of different games with links attached to them. I have managed to adjust the size of the image on hover, but now I am looking for a way to keep the size bigger after clicking on the link. Is there a simp ...

javascripthtmlbackgroundcss

CSS HTML parent div cannot contain image properly

Creating a website using Bootstrap: <div class="row padding_zero"> <div class="col section px-0"> <img class="img-trans padding_zero" src="./svg/clouds-00.svg" style="margin-top: -150px& ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for aligning an element vertically when it has a float using CSS or JavaScript

I am struggling with centering the image within the article list loop I created. The code snippet looks like this: <article class="article <?php if($i%2==0) { echo 'even'; } else { echo 'odd'; } ?>"> <section class ...

javascriptjqueryhtmlcss

What are some techniques for concealing a CSS transition beneath another element in both directions?

Witness the magic in action! By clicking on the black box below, a larger black box will gracefully emerge from beneath the sidebar. While it may not be as clear in jsfiddle, rest assured that this effect is more pronounced in browsers. Thanks to some clev ...

javascriptjqueryhtmlcsscss-transitions

Executing Selenium geckodriver without creating any geckodriver log files

I have a set of Robot Framework test suites that utilize the SeleniumLibrary. These tests are executed using Firefox and geckodriver, resulting in the creation of a "geckodriver-*.log" file every time the suites are run. Initially, I only have the ".robot ...

pythonseleniumfirefoxrobotframeworkgeckodriver

Enhancing collapsible list headers in jquery mobile with checkboxes

Having trouble with a jQuery Mobile website issue. Currently working on a jQuery mobile site that includes a collapsible list (). The client request is to have a checkbox inside the header, allowing users to check items off without needing to open them. T ...

javascriptjquerycssjquery-mobilemobile

Tips for scrolling a div that has too much content within a webpage

Is there a method to manipulate the scrollbar within a div on a webpage? Specifically, I am attempting to automate scrolling up and down on an Instagram post like . However, since the scrollbar may be hidden using CSS properties, detecting it can be challe ...

javacssseleniumscrollbaroverflow

The upper 50% is malfunctioning because the parent height is set to auto

Having a bit of trouble with vertically centering a child div within its parent. I've been using this mixin: @mixin vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); ...

htmlcss

The hamburger menu image is not appearing when using the CSS background-image property

The burger menu image I have as a background image is not displaying in my navigation bar or on the page. I set it to appear when the page is responsive (max-width: 480px), but it still doesn't show. I even tried copying the code to my main CSS above ...

htmlcss

Combine the jQuery selectors :has() and :contains() for effective element targeting!

I am trying to select a list item element that has a label element inside it. My goal is to use the :has() selector to target the list item and then match text within the label using the :contains() selector. Can I achieve this in a single line of jQuery ...

javascriptjqueryhtmlcss