CODEWITHSUNDEEP
htmlcsshtml-lists
Shawn
Shawn

Reputation: 3149

width of div inside of li does not align

I have a ul whose li's each contain 8 div's which should all be the same width.

In my CSS, I've defined the width as a calculated percentage. 

#csaReportBody div{
    display:inline-block;
    width:calc( 100% / 8.45 );
    padding:1px;
    font-size:.8em;
    height:19px;
    border-left:1pt solid red;  /* added to see where the columns were */
}

The weird thing, is that even though the browser "thinks" they are the same width, they don't display that way. For example:

enter image description here

enter image description here

You can see in the picture when I hover over the div, it gives me the exact same measurement for each one (132.52 x 21 - they all show the same), yet the bottom row is slightly narrower on each of the 8 divs in a li row.

the complete HTML looks like this:

#csaReportBody {
  list-style: none;
  padding: 0;
  width: 100%;
}

#csaReportBody li:first-child {
  border-bottom: 1pt solid #ccc;
}

#csaReportBody li:nth-child(2n+2) {
  background: #fff;
}

#csaReportBody div {
  display: inline-block;
  width: calc( 100% / 8.45);
  padding: 1px;
  font-size: .8em;
  height: 19px;
  border-left: 1pt solid red;
}
<ul id="csaReportBody">
  <li id="csaTitle">
    <div class="csaDiv boldCtr">ID</div>
    <div class="csaDiv boldCtr">Aggl.<sup>1</sup>
    </div>
    <div class="csaDiv boldCtr">Total Motility %</div>
    <div class="csaDiv boldCtr">Volume (mL)</div>
    <div class="csaDiv boldCtr">Concentration (M/mL)</div>
    <div class="csaDiv boldCtr">Total Sperm Dose (billions)</div>
    <div class="csaDiv boldCtr">Intact Acrosomes - Viable %, Flow Cytometry</div>
    <div class="csaDiv boldCtr">Target <input type="checkbox" id="csaShowTarget"></div>
  </li>
  <li class="csaData">
    <div class="csaDiv csaSAMPLEID" data-sid="G005-166-850">G005-166-850 <img src="images/cross.png"></div>
    <div class="csaDiv csaAGGL ctr">Mild</div>
    <div class="csaDiv csaTM ctr">85</div>
    <div class="csaDiv csaV ctr">68.8</div>
    <div class="csaDiv csaC ctr">46.75</div>
    <div class="csaDiv csaTSD ctr">3.22</div>
    <div class="csaDiv csaIAVFC ctr">NR</div>
    <div class="csaDiv csaTAR tarStat ctr">NP</div>
  </li>
  <li class="csaData">
    <div class="csaDiv csaSAMPLEID" data-sid="G005-166-854">G005-166-854 <img src="images/cross.png"></div>
    <div class="csaDiv csaAGGL ctr">Mild</div>
    <div class="csaDiv csaTM ctr">92</div>
    <div class="csaDiv csaV ctr">71.2</div>
    <div class="csaDiv csaC ctr">51.50</div>
    <div class="csaDiv csaTSD ctr">3.67</div>
    <div class="csaDiv csaIAVFC ctr">NR</div>
    <div class="csaDiv csaTAR tarStat ctr">NP</div>
  </li>
  <li class="csaData">
    <div class="csaDiv csaSAMPLEID" data-sid="G005-166-852">G005-166-852 <img src="images/cross.png"></div>
    <div class="csaDiv csaAGGL ctr">Mild</div>
    <div class="csaDiv csaTM ctr">91</div>
    <div class="csaDiv csaV ctr">68.2</div>
    <div class="csaDiv csaC ctr">54.25</div>
    <div class="csaDiv csaTSD ctr">3.70</div>
    <div class="csaDiv csaIAVFC ctr">NR</div>
    <div class="csaDiv csaTAR tarStat ctr">NP</div>
  </li>
  <li class="csaData">
    <div class="csaDiv csaSAMPLEID" data-sid="G005-166-853">G005-166-853 <img src="images/cross.png">
      <img src="images/a.png"></div>
    <div class="csaDiv csaAGGL ctr">Mild</div>
    <div class="csaDiv csaTM ctr">93</div>
    <div class="csaDiv csaV ctr">69.1</div>
    <div class="csaDiv csaC ctr">44.50</div>
    <div class="csaDiv csaTSD ctr">3.07</div>
    <div class="csaDiv csaIAVFC ctr">NR</div>
    <div class="csaDiv csaTAR tarStat ctr">NP</div>
  </li>
  <li class="csaData">
    <div class="csaDiv csaSAMPLEID" data-sid="G005-166-851">G005-166-851 <img src="images/cross.png"></div>
    <div class="csaDiv csaAGGL ctr">Mild</div>
    <div class="csaDiv csaTM ctr">86</div>
    <div class="csaDiv csaV ctr">67.6</div>
    <div class="csaDiv csaC ctr">50.75</div>
    <div class="csaDiv csaTSD ctr">3.43</div>
    <div class="csaDiv csaIAVFC ctr">NR</div>
    <div class="csaDiv csaTAR tarStat ctr">NP</div>
  </li>
  <li class="csaMean">
    <div class="csaDiv"></div>
    <div class="csaDiv ctr">MEAN</div>
    <div class="csaDiv ctr">89</div>
    <div class="csaDiv ctr">69.0</div>
    <div class="csaDiv ctr">49.55</div>
    <div class="csaDiv ctr">3.42</div>
    <div class="csaDiv ctr">-</div>
    <div class="csaDiv tarStat csaTAR ctr">-</div>
  </li>
</ul>

The data is generated, and once it is displayed, the "MEAN" line is calculated and appended to the ul.

My question is: If the first column is properly left aligned, and all the div's are the same width, why don't they align?

Upvotes: 0

Views: 672

Answers (1)

Action Jackson
Action Jackson

Reputation: 1206

It would help a lot if you showed ALL of the css for your classes, because that's where the problem is happening. But because you haven't done that (yet), the following tips might help you to debug it:

  1. First, in the spirit of making it cleaner, it would make much more sense to use the <table> tag for all this, then add rows and columns, instead of <div> elements inside <li> elements to do the same thing. The first reason why is because it's more semantic. A second reason why is because by default, a <div> is a block element, so you have to display: inline-block;, or inline as you did, for it to not show up wonky. Nevertheless, let's say you need it like that for some reason.

  2. With the above in mind, your first row inherits from the id csaTitle. After that, each of your rows inherits from the class csaData, and all of these so far are aligned properly. But your last row inherits from the class csaMean.

Judging by what you've shown so far, my best bet is that your problem lies in that class.

Upvotes: 2

Related Questions