Search code examples
htmlcssmultiple-columnstext-alignment

Align two columns in the same div horizontally


I need to align those two columns horizontally but it seems that all the solutions I've find are not working for me. The column on the right side will always be below the column in the left side. How can I solve it?

article {
  margin: 0 auto;
  padding-top: 80px!important;
  padding-bottom: 10%!important;
  width: 80%;
}

article:after {
  content: '';
  display: block;
  clear: left;
  margin: 0;
}

h2,
p {
  float: left!important;
  font-size: 1em;
  font-weight: normal;
}

h2 {
  text-align: start!important;
  clear: left;
  /*Move to new line*/
  width: auto;
  margin: auto;
}

p {
  margin: 0 0 0 300px;
  white-space: normal;
}

p+p {
  margin-left: 300px;
  clear: left;
}

h2+p {
  text-align: start!important;
}
<article id="lyrics">
  <h2>NEWS<br>
    <br><br>31.08.2022</h2>

  <p>In questa sezione andremo a collocare le notizie in un layout a due colonne: nella colonna di sx avremo la data di aggiunta della “news”, in modo da avere anche un’indicizzazione dell’informazione. Nella colonna di dx invece andremo a collocare la news
    in se per se. In questa sezione andremo ad utilizzare un contenuto solamente testuale.</p>
</article>


Solution

  • just use flex on the <article> tag

    article {
      margin: 0 auto;
      padding-top: 80px!important;
      padding-bottom: 10%!important;
      width: 80%;
      display:flex;
      justify-content:space-around;
      align-items:start;
    }
    
    
    #news, #date{
    display:block;
    text-align:center;
    margin:0;
    }
    
    h2,
    p {
      
      font-size: 1em;
      font-weight: normal;
    }
    
    
    
    
    
    p {
      margin: 0 0 0 300px;
      white-space: normal;
    }
    <h2 id='news'>NEWS</h2>
    <article id="lyrics">
      <h2 id='date'>31.08.2022</h2>
      <p>In questa sezione andremo a collocare le notizie in un layout a due colonne: nella colonna di sx avremo la data di aggiunta della “news”, in modo da avere anche un’indicizzazione dell’informazione. Nella colonna di dx invece andremo a collocare la news
        in se per se. In questa sezione andremo ad utilizzare un contenuto solamente testuale.</p>
    </article>