0

I can't figure out why my bottom divs are not lining up with the tds. Both the table, trs and outer div are same width in pixels. Each inline div looks like the correct width but somehow I can only fit 7 across instead of 8 and they are not lining up 

html,
body {
  font-family: Consolas, monaco, monospace;
  margin:0;
}   

td{
width:12.5%;
padding:0;
}

table {
  width: 80%;
  height: 400px;
  margin:0 auto;
  text-align:center;
  padding:0;
  border-spacing:0;
}

.charttitle {
  text-align: center;
}

.bars td {
  vertical-align: bottom;
}

.bars div:hover {
  opacity: 0.6;
}

/*Flat UI colors*/

.one {
  background: #16A085;
}

.two {
  background: #2ECC71;
}

.three {
  background: #27AE60;
}

.four {
  background: #3498DB;
}

.five {
  background: #2980B9;
}

.six {
  background: #9B59B6;
}

.seven {
  background: #8E44AD;
}

.eight {
  background: #34495E;
}

.nine {
  background: #2C3E50;
}

.ten {
  background: #22313f;
}

.eleven {
  background: #F1C40F;
}

.twelve {
  background: #F39C12;
}

.thirteen {
  background: #E67E22;
}

.fourteen {
  background: #D35400;
}

.fifteen {
  background: #E74C3C;
}

.sixteen {
  background: #C0392B;
}

.seventeen {
  background: #ECF0F1;
}

.seventeen.clouds {
  color: #BDC3C7;
}

.eighteen {
  background: #BDC3C7;
}

.nineteen {
  background: #95A5A6;
}

.twenty {
  background: #7F8C8D;
}


#a1{

    content:'ABCD';
 }



#a1:hover  span {
  display: none;
}
#a1:hover:after{
  content: 'ADD to see how this works';
}

.dh{
    width:12.50000%;
    display:inline-block;


}









  
<body>

<table>
<tbody>
<tr><td colspan="9" class="charttitle">Students Academic Scores</td></tr>
<tr class="bars"><td>20%<div class="one" style="height: 20%;"></div></td>
<td>73%<div class="two" style="height: 73%;"></div></td>
<td>20%<div class="three" style="height: 20%;"></div></td>
<td>89%<div class="four" style="height: 89%;"></div></td>
<td>24%<div class="five" style="height: 24%;"></div></td>
<td>86%<div class="six" style="height: 86%;"></div></td>
<td>96%<div class="seven" style="height: 96%;"></div></td>
<td>71%<div class="eight" style="height: 71%;"></div></td>

</tr>


</tbody></table>
<br><br>
<div style='width:80%;margin: 0 auto'>
<div id='a1' class='dh'><span>ABCD</span></div>
   <div id='a2' class='dh'><span>AbCd</span></div>
   <div id='a3' class='dh'><span>Abcd</span></div>
   <div id='a4' class='dh'>4</div>
   <div id='a5' class='dh'>5</div>
   <div id='a6' class='dh'>6</div>
   <div id='a7' class='dh'>7</div>
   <div id='a8' class='dh'>8</div>
</div>

</body>
DCR
  • 14,737
  • 12
  • 52
  • 115

2 Answers2

2

You have a space between the closing and the opening div elements: </div>[spaces/new line here]<div> which makes your browser keeping the <div>'s apart.

You can remove that space, or use floating elements instead.

Here is an example without the spaces:

html,
body {
  font-family: Consolas, monaco, monospace;
  margin:0;
}   

td{
width:12.5%;
padding:0;
}

table {
  width: 80%;
  height: 400px;
  margin:0 auto;
  text-align:center;
  padding:0;
  border-spacing:0;
}

.charttitle {
  text-align: center;
}

.bars td {
  vertical-align: bottom;
}

.bars div:hover {
  opacity: 0.6;
}

/*Flat UI colors*/

.one {
  background: #16A085;
}

.two {
  background: #2ECC71;
}

.three {
  background: #27AE60;
}

.four {
  background: #3498DB;
}

.five {
  background: #2980B9;
}

.six {
  background: #9B59B6;
}

.seven {
  background: #8E44AD;
}

.eight {
  background: #34495E;
}

.nine {
  background: #2C3E50;
}

.ten {
  background: #22313f;
}

.eleven {
  background: #F1C40F;
}

.twelve {
  background: #F39C12;
}

.thirteen {
  background: #E67E22;
}

.fourteen {
  background: #D35400;
}

.fifteen {
  background: #E74C3C;
}

.sixteen {
  background: #C0392B;
}

.seventeen {
  background: #ECF0F1;
}

.seventeen.clouds {
  color: #BDC3C7;
}

.eighteen {
  background: #BDC3C7;
}

.nineteen {
  background: #95A5A6;
}

.twenty {
  background: #7F8C8D;
}


#a1{

    content:'ABCD';
 }



#a1:hover  span {
  display: none;
}
#a1:hover:after{
  content: 'ADD to see how this works';
}

.dh{
    width:12.50000%;
    display:inline-block;


}
<body>

<table>
<tbody>
<tr><td colspan="9" class="charttitle">Students Academic Scores</td></tr>
<tr class="bars"><td>20%<div class="one" style="height: 20%;"></div></td>
<td>73%<div class="two" style="height: 73%;"></div></td>
<td>20%<div class="three" style="height: 20%;"></div></td>
<td>89%<div class="four" style="height: 89%;"></div></td>
<td>24%<div class="five" style="height: 24%;"></div></td>
<td>86%<div class="six" style="height: 86%;"></div></td>
<td>96%<div class="seven" style="height: 96%;"></div></td>
<td>71%<div class="eight" style="height: 71%;"></div></td>

</tr>


</tbody></table>
<br><br>
<div style='width:80%;margin: 0 auto'><div id='a1' class='dh'><span>ABCD</span></div><div id='a2' class='dh'><span>AbCd</span></div><div id='a3' class='dh'><span>Abcd</span></div><div id='a4' class='dh'>4</div><div id='a5' class='dh'>5</div><div id='a6' class='dh'>6</div><div id='a7' class='dh'>7</div><div id='a8' class='dh'>8</div></div>

</body>
Dekel
  • 60,707
  • 10
  • 101
  • 129
1

It happens becuase when you use display: inline-block;, spaces may be generated between the divs, as you can see here (I just added a background-color).

enter image description here

So, your workarounds are:

  1. remove all tabs and spaces in HTML between these lines, something like this: 

      <div id='a1' class='dh'><span>ABCD</span></div
  ><div id='a2' class='dh'><span>AbCd</span></div
  ><div id='a3' class='dh'><span>Abcd</span></div
  ><div id='a4' class='dh'>4</div><div id='a5' class='dh'>5</div
  ><div id='a6' class='dh'>6</div
  ><div id='a7' class='dh'>7</div
  ><div id='a8' class='dh'>8</div>

  2. add display: flex to the parent div: (you don't have a classname for it, so in inline): <div style='width:80%;margin: 0 auto; display: flex;'>. Flexbox will prevent any spacing between the divs.

I recommend you to use display: flex. CSS control is always preferred over HTML changes.

Itay Ganor
  • 3,965
  • 3
  • 25
  • 40