CODEWITHSUNDEEP
htmlcssgoogle-chromeinternet-explorer
James
James

Reputation: 262

CSS Multi column div formatting issue

I have created a multi column div which is formatted correctly in Firefox but does not completely format correctly in Chrome or IE. When you look at the example on Firefox, three columns are shown and the frame of the last item in column one, ends correctly. When you look at the example on Chrome or IE, three columns are shown but the frame of the last item in column one is split between column one and column two.

Is it possible to format this to work correctly all browsers? The solution I am looking for will take into account that the number of items will vary more or less.

Here is the code (and on JSFiddle too):

#assignAreaTypes { 
  background-color:#FFF;
  border-radius:15px;
  color:#000; 
  padding:20px;
  min-width:400px;
  min-height: 150px;
}
.tierGrp {
  align:center;
  text-align:center;
  font-size:26px;
  background-color:#EEE;
  width:625px;
  min-height:145px;
  height:auto;
  display:block;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
  padding-top: 3px
    padding-bottom: 3px
}
.areaGrp {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: 5px;
  text-align:left;
}
.areaType {
  margin-bottom:3px;
  font-size:13px;
  padding-bottom: 2px;
}
.eMail {
  font-size: 12px;
  font-family:Georgia, "Times New Roman", Times, serif;
  border:1px solid #3498DB;
  border-radius:5px;
  background:#EDF5FA 50% 50% repeat-x;
  height:auto;
  min-width:100px;
  padding-left:5px;
  padding-right:5px;
}
<div id="assignAreaTypes">
  <form id="userAreaTypes" action="/Admin/updateUsers.php" method="post">
    <a class="b-close ui-state-default ui-corner-all ui-icon ui-iconclosethick"></a>
    <div class="buttonHolder">
      <div align="center"><font size="+3">Test User</font></div>
      <div align="left"><font size="+1">Assigned Tests:</font></div>
      <div class="tierGrp areaGrp">
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="13">Test 01</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="1">Test 02</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="18">Test 03</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="6">Test 04</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="16">Test 05</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="3">Test 06</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="10">Test 07</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="8">Test 08</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="14">Test 09</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="4">Test 10</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="9">Test 11</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="7">Test 12</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="5">Test 13</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="2">Test 14</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="21">Test 15</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="11">Test 16</div></label>
      </div>
    </div> 
  </form>
</div>

Upvotes: 1

Views: 62

Answers (1)

Alvaro Montoro
Alvaro Montoro

Reputation: 29675

It is possible that column-fill only works for you on Firefox and not on Chrome and IE, because at this moment it is only supported by that browser and not by the others. According to the MDN website, column-fill is supported by Firefox and Chrome; but then according to caniuse.com and W3Schools (I know people don't like this source though), that support is only for Firefox and just partial (or none at all) for Chrome and IE.

You could use a workaround (a bit hacky) that fixes the display and seems to work on Chrome and IE:

  • Make the div inside the labels have a display:inline-block.
  • Specify the width for that div to be 100% of the space.

The result seems to work, but now there's some vertical spacing that is a bit annoying (you could fix by adding some styles to the labels). The code for that would be like this:

#assignAreaTypes { 
  background-color:#FFF;
  border-radius:15px;
  color:#000; 
  padding:20px;
  min-width:400px;
  min-height: 150px;
}
.tierGrp {
  text-align:center;
  text-align:center;
  font-size:26px;
  background-color:#EEE;
  width:625px;
  min-height:145px;
  height:auto;
  display:block;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
  padding-top: 3px
    padding-bottom: 3px
}
.areaGrp {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
  column-gap: 5px;
  text-align:left;
}
.areaType {
  margin-bottom:3px;
  font-size:13px;
  padding-bottom: 2px;
}
.eMail {
  font-size: 12px;
  font-family:Georgia, "Times New Roman", Times, serif;
  border:1px solid #3498DB;
  border-radius:5px;
  background:#EDF5FA 50% 50% repeat-x;
  height:auto;
  min-width:100px;
  padding-left:5px;
  padding-right:5px;
}
.tierGrp label > div {
  display:inline-block;
  width:100%;
  box-sizing:border-box;
}
<div id="assignAreaTypes">
  <form id="userAreaTypes" action="/Admin/updateUsers.php" method="post">
    <a class="b-close ui-state-default ui-corner-all ui-icon ui-iconclosethick"></a>
    <div class="buttonHolder">
      <div align="center"><font size="+3">Test User</font></div>
      <div align="left"><font size="+1">Assigned Tests:</font></div>
      <div class="tierGrp areaGrp">
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="13">Test 01</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="1">Test 02</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="18">Test 03</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="6">Test 04</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="16">Test 05</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="3">Test 06</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="10">Test 07</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="8">Test 08</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="14">Test 09</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="4">Test 10</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="9">Test 11</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="7">Test 12</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="5">Test 13</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="2">Test 14</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="21">Test 15</div></label>
        <label><div class="eMail areaType"><input type="checkbox" name="userAreaType[]" value="11">Test 16</div></label>
      </div>
    </div> 
  </form>
</div>

Upvotes: 1

Related Questions