1

        <table >
            <tbody>
                <tr>
                    <th colspan="1">FrisBar:</th>
                    <th > <p style="color:#111;">00</p> </th>
                </tr>
                <tr>
                    <td><p>Totaal:</p></td>
                    <td><p id="FrisBarTot1">0</p></td>
                </tr>
                <tr>
                    <td><p>Kratjes:</p></td>
                    <td><p id="FrisBarKrat1">0</p></td>
                </tr>
                <tr>
                    <td><p>Overige:</p></td>
                    <td><p id="FrisBarOver1">0</p></td>
                </tr>
            </tbody>
        </table>

The first two "totaal" and "Kratjes", are working fine but the "overige" isn't aligning how I want it. Does anyone have an idea how to fix this?

Edit:

By using a table it works and making the two 00 in the makes the numbers have an equal size/space. I want to thank everyone who helped me:D

Zeeebass
  • 37
  • 8
  • I put your code in a snippet in your question but note that you omitted a closing `}` in your CSS – j08691 Jul 14 '20 at 19:09
  • Thank you so much, I tried to do it as good as possible. I must have missed that while copy pasting. – Zeeebass Jul 14 '20 at 19:11
  • The text-align: justify will not justify the last line. Instead it will aligned left. You should use some trick to make the last line justified. For reference, try this link: https://stackoverflow.com/questions/4771304/justify-the-last-line-of-a-div – Zunan Jul 14 '20 at 19:20

3 Answers3

0

Try doing this.

  #main {
  transition: margin-left 0.1s;
  padding: 16px;
  display: flex;
  justify-content: center;
}

.mainText p {
  padding: 0 20px;
}
<div id="main" class="mainText">
  <p class="bartext" id="tabelFrisBar">Totaal: 0 Kratjes: 0 Overige: 0</p>
  <p class="bartext" id="tabelFrisExtra">Totaal: 0 Kratjes: 0 Overige: 0</p>
  <p class="bartext" id="tabelBierExtra">Totaal: 0 Kratjes: 0 Overige: 0</p>
</div>
Tanu Arora
  • 231
  • 2
  • 7
0

The problem is you are using inline-block and based on your screenshot it looks like they should be blocks. Here is the code markup based on your screenshot:

.bartext-container {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
  
.bartext {
  align-self: flex-start;
  background-color: #000;
  color: #fff;
  flex: 0 0 auto;
  margin-bottom: 15px;
  position: relative;
  padding: 15px;
  width: auto;
  
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
}
<div id="main" class="mainText">
  <div class="bartext-container">
    <div class="bartext" id="tabelFrisBar">  
       Totaal: 0<br>
       Kratjes: 0<br>
       Overige: 0
    </div>
    <div class="bartext" id="tabelFrisBarExtra">  
       Totaal: 0<br>
       Kratjes: 0<br>
       Overige: 0
    </div>
    <div class="bartext" id="tabelFrisBarExtra">  
       Totaal: 0<br>
       Kratjes: 0<br>
       Overige: 0
    </div>
  </div>
</div>
Jamie
  • 1,909
  • 3
  • 22
  • 47
  • This looks good here, but when I copy it to my own code, It doenst work the trick. I am working with a sidebar on my page, which re-adjusts the width. Also, i would like the numbers to be aligned too. Would i be better of by using a table and just align everything to the left? – Zeeebass Jul 15 '20 at 14:21
  • can you share your full markup and css in a gist https://gist.github.com/? – Jamie Jul 15 '20 at 22:03
0

By using a table it works and making the two 00 in the second cell, makes the numbers have an equal size/space.

Zeeebass
  • 37
  • 8