Elements not showing when using column count

Question

I have a grid of data with 2 columns using css of column-count. I've just had a user respond by saying that some of the data is not showing. It only appears to be in Firefox.

The dates are in the html they just dont display? As highlighted in the orange boxes.

Here is some sample code illustrating it...must be using Firefox

Codepen

> <div class="outer">   <div class="inner">
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Confined Space Rescue</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Enter Confined Space</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Gas Test Atmospheres</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Operate Breathing Apparatus</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Working @ Heights</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb 22 2022 </span>Drivers Licence - Car (New Zealand)</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb 19 2019 </span>Fit Test Report </div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Health and Safety</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>INERT - Inert Entry Technician Course</div>
>     <div class="expiry-status-0"><span class="pull-right ">Nov 12 2020 </span>Offshore Facility Abandonment &amp; Sea Survival</div>
>     <div class="expiry-status-0"><span class="pull-right ">Aug 28 2019 </span>Passport</div>
>     <div class="expiry-status-0"><span class="pull-right ">Nov 12 2020 </span>TBOSIET (Include HUET)</div>
>     <div class="expiry-status-0"><span class="pull-right "></span>Torquing / Tensioning</div>
>     <div class="expiry-status-0"><span class="pull-right "></span>White Card - QLD</div>
>     <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Work in Accordance with an Issued Permit</div>   </div> </div>

Forgive me if I havent formatted my question correctly. I tried to be good by adding a Codepen sample but it tells me I must include code as well?

Your dates don't display because there are no dates there, look at your HTML markup. There's no date for `Torquring` or `White Card` fields, this isn't a Firefox issue this wouldn't work on any browser. — pretzelhammer, Oct 20 '18 at 23:19
Possible duplicate of [Right floated element disappears when using columns in Firefox](https://stackoverflow.com/questions/48979009/right-floated-element-disappears-when-using-columns-in-firefox) — ecg8, Oct 20 '18 at 23:22
@kfedorov91 Look again, the issue is the last one on the first column and the first one on the second. — ecg8, Oct 20 '18 at 23:23

score 1 · Accepted Answer · answered Oct 20 '18 at 23:35

It appears that Firefox is doing something weird here which it is not supposed to do. What you can do to fix the problem is position the span absolute instead of using a float. The only things required are making the container's position relative, changing it's position to absolute, and set right and top to 0px (or in this case, the correct padding).

The following should give the same result, and also work in FireFox

html {
  font-family: Arial;
}
.outer {
  width: 1000px;
}
.inner {
   column-count: 2
}
div.inner div {
 border-bottom: solid 1px #ccc;
 padding: 6px 15px 6px 0;
  position:relative;
}

.pull-right {
  position:absolute;
  right:15px;
  top:6px;
}

<div class="outer">
  <div class="inner">
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Confined Space Rescue</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Enter Confined Space</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Gas Test Atmospheres</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Operate Breathing Apparatus</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Core - Working @ Heights</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb 22 2022 </span>Drivers Licence - Car (New Zealand)</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb 19 2019 </span>Fit Test Report </div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Health and Safety</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>INERT - Inert Entry Technician Course</div>
    <div class="expiry-status-0"><span class="pull-right ">Nov 12 2020 </span>Offshore Facility Abandonment &amp; Sea Survival</div>
    <div class="expiry-status-0"><span class="pull-right ">Aug 28 2019 </span>Passport</div>
    <div class="expiry-status-0"><span class="pull-right ">Nov 12 2020 </span>TBOSIET (Include HUET)</div>
    <div class="expiry-status-0"><span class="pull-right "></span>Torquing / Tensioning</div>
    <div class="expiry-status-0"><span class="pull-right "></span>White Card - QLD</div>
    <div class="expiry-status-0"><span class="pull-right ">Feb  2 2019 </span>Work in Accordance with an Issued Permit</div>
  </div>
</div>

Elements not showing when using column count

1 Answers1