What's wrong with my code that it doesn't align columns?-CodePudding

I want to create columns in rows with two columns in each row, but they won't align.

CSS

        .lyricsDual {
          border-collapse: collapse;       
          margin: 20px;
        }

        .lyricsFi {
          text-align: right;
          border-right: 1px #888 solid;
        }

        .lyricsEn {
          text-align: left;
        }

       .lyricsDual .lyricsFi {
          padding-right: 10px;
        }

        .lyricsFi, .lyricsEn {
          vertical-align: top;
          padding-left: 10px;
          vertical-align: top;
        }

         table {
          display: table;
          border-collapse: separate;
          box-sizing: border-box;
          text-indent: initial;
          border-spacing: 2px;
          border-color: grey;
         }

HTML

           <table >
            <tbody>
             <tr>
              <td >
              <h3>näkin laulu</h3>
              näkki laulaa lauluaan<br>
              luokseen sävelet houkuttavat<br>
              kylmään järveen nukkumaan<br>
              ihmislasta tuudittaa<br>
              </td>
              <td >
              <h3>the chant of näkki</h3>
              näkki chants a song<br>
              its tunes fill the air<br>
              shivers of chillness<br>
              cradle a human child<br>
              </td></tr></tbody></table>

           <table >
            <tbody>
             <tr>
              <td >
              <h3 id="huomen">huomen</h3>
              kuulaina öinä syksyn<br>
              kajo täyttää taivaan hohtoon<br>
              sarasteen koittaessa<br>
              taivaanlaki ylle kumartuu<br>
              huomenen tervehdyksen<br>
              </td><td >
              <h3 id="morrow">morrow</h3>
              in the crystalline autumn nights<br>
              dawning reddens the sky<br>
              ambience of<br>
              looming light bends over<br>
              morrow's greeting<br>
              </td></tr></tbody></table>

and it goes on, looking like this I want to center them all, but I can't seem to do it. I tried aligning .lyricsFi to the left but it looked even worse. I also tried some other things like making all their widths the same but it didn't work out either.

CodePudding user response：

Here same with css grid

body {
  width: 100vw;
  height: 100vh;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 10px;
  padding-bottom: 16px;
}

.lyricsFi {
  text-align: right;
  padding-right: 10px;
  border-right: 1px #888 solid;
}

<div >
  <div >
    <div >
      <div >
        <h3>näkin laulu</h3>
        näkki laulaa lauluaan<br> luokseen sävelet houkuttavat<br> kylmään järveen nukkumaan<br> ihmislasta tuudittaa<br>
      </div>
      <div >
        <h3>the chant of näkki</h3>
        näkki chants a song<br> its tunes fill the air<br> shivers of chillness<br> cradle a human child<br>
      </div>
    </div>
    <div >
      <div >
        <h3 id="huomen">huomen</h3>
        kuulaina öinä syksyn<br> kajo täyttää taivaan hohtoon<br> sarasteen koittaessa<br> taivaanlaki ylle kumartuu<br> huomenen tervehdyksen<br>
      </div>
      <div >
        <h3 id="morrow">morrow</h3>
        in the crystalline autumn nights<br> dawning reddens the sky<br> ambience of<br> looming light bends over<br> morrow's greeting<br>
      </div>
    </div>
  </div>
</div>

not too cold in Finland at the moment?

CodePudding user response：

Also made a flexbox for you bro !!! 2 explanations ! Now you have reasons not to use tables anymore, unless the content be an table :P

I tried use all the good flexbox properties !! Ctrl Shift i in google chrome and play with it all !! With de grid options also !! Learn more about all that !! Merry Christmas !

Edit : I found this guide about flex property !!! Even I will read later too! A good guide!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    outline: none;
    font-family: 'Poppins', 'system-ui', 'sans-serif';
    font-weight: 300;
    transition: .3s linear 0s all;
}
h6 {
    font-weight: 600;
}
h5, h4 {
    font-weight: 500;
}
main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 20px;
    padding-top: 20px;
}
main > section {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
}
main > section:nth-child(1) {
    background: #f3f57e;
}
main > section:nth-child(2) {
    background: #ffab7a;
}
main > section > div {
    flex: 0 0 50%;
}
main > section > div:nth-child(1) {
    text-align: right;
}
main > section > div:nth-child(2) {
    text-align: left;
}

</style>
</head>
<body>
<main>
    <section>
        <div>
            <h5>näkin laulu</h5>
            <p>
                näkki laulaa lauluaan<br>
                luokseen sävelet houkuttavat<br>
                kylmään järveen nukkumaan<br>
                ihmislasta tuudittaa<br>
            </p>
        </div>
        <div>
            <h5>the chant of näkki</h5>
            <p>
                näkki chants a song<br>
                its tunes fill the air<br>
                shivers of chillness<br>
                cradle a human child<br>
            </p>
        </div>
    </section>
    <section>
        <div>
            <h5>huomen</h5>
            <p>
                kuulaina öinä syksyn<br>
                kajo täyttää taivaan hohtoon<br>
                sarasteen koittaessa<br>
                taivaanlaki ylle kumartuu<br>
                huomenen tervehdyksen<br>
            </p>
        </div>
        <div>
            <h5>morrow</h5>
            <p>
                in the crystalline autumn nights<br>
                dawning reddens the sky<br>
                ambience of<br>
                looming light bends over<br>
                morrow's greeting<br>
            </p>
        </div>
    </section>
</main>
</body>
<script>
    
</script>
</html>