Align two columns in the same div horizontally

Question

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>

Have you tried using flexbox?? And also, avoid using `!important` — Odunsi, Aug 30 '22 at 23:11

DCR · Accepted Answer · 2022-08-31T00:23:41.760

1

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>

edited Aug 31 '22 at 00:23

answered Aug 30 '22 at 23:13

DCR

14,737
12
52
115

It's not working!! not even in your snippet! – Emanuele Pesa Aug 30 '22 at 23:27
looks fine to me. what's the problem? look at it in full page mode. Is news with the date (your h2 tag) 1 column and the p tag the 2nd column? or did you have something else in mind? – DCR Aug 31 '22 at 00:00
"News" should be alone up there and "31.0.2022" should be horizontally align to "in queste notizie" etc – Emanuele Pesa Aug 31 '22 at 00:03
see revised snippet – DCR Aug 31 '22 at 00:05
still not working - 31.08.2022 should be in the same line of "in queste notizie", not centered! They should touch the same line! – Emanuele Pesa Aug 31 '22 at 00:06
so you want the date at the top of the column aligned with the top of the p tag? – DCR Aug 31 '22 at 00:20
ok, snippet revised again, take a look. – DCR Aug 31 '22 at 00:24
Your snippt actually work here, but don't know why it doesn't when I do that on my website or with the ispect tool. https://civitonia.com/27387645 this is the link, try to have a look here. If you add that everything crash – Emanuele Pesa Aug 31 '22 at 00:40
looks like it's working on your site – DCR Aug 31 '22 at 15:52

Adam · Answer 2 · 2022-08-31T00:52:58.843

EDITED: Complete rehash.

The best way to display this imho is using display:table and table-cell as it aligns the columns. I've wrapped each element in a div with the class of 'container' which acts as a table row so we can put the title on the left and the lyrics on the right. The div with the class of title is the left hand column and the article section is the right hand column. This means you can have multiple paragraphs in the article.

Finally I've remmoved the white-space:pre as when writing this in an editor, the indenting is rendered on the browser. I've added br tags to provide new lines.

#lyrics {
  display: table;
  width: 600px;
  background: #FFF;
  font-size: 1em;
  font-weight: normal;
}

.container {
  display: table-row;
}

article,
.title {
  display: table-cell;
  padding: 0.5rem 0;
}

p {
  margin: 0;
  margin-bottom: 0.5rem;
}

<div id="lyrics">
  <div class="container">
    <div class="title">Frank:</div>
    <article>
      <p>My my my<br> My my my my my<br> My my my my<br> My my<br> I'm a wild and an untamed thing<br> I'm a bee with a deadly sting<br> You get a hit and your mind goes ping<br> Your heart'll pump and your blood will sing<br> So let the party and the sounds
        rock on<br> We're gonna shake it 'till the life has gone<br> Rose tint my world<br> Keep me safe from my trouble and pain</p>
    </article>
  </div>
  <div class="container">
    <div class="title">Chorus:</div>
    <article>
      <p>We're a wild and an untamed thing<br> We're a bee with a deadly sting<br> You get a hit and your mind goes ping<br> Your heart'll pump and your blood will sing<br> So let the party and the sounds rock on<br> We're gonna shake it 'till the life has
        gone<br> Rose tint my world<br> Keep me safe from my trouble and pain</p>

      <p>We're a wild and an untamed thing<br> We're a bee with a deadly sting<br> You get a hit and your mind goes ping<br> Your heart'll pump and your blood will sing<br> So let the party and the sounds rock on<br> We're gonna shake it 'till the life has
        gone, gone, gone<br> Rose tint my world<br> Keep me safe from my trouble and pain</p>
    </article>
  </div>
  <div class="container">
    <div class="title">Riff Raff:</div>
    <article>
      <p>Frank-N-Furter, it's all over<br> Your mission is a failure<br> Your lifestyle's too extreme<br> I'm your new commander<br> You now are my prisoner<br> We return to Transylvania<br> Prepare the transit beam</p>
    </article>
  </div>
</div>

https://jsfiddle.net/MomoMom0/k2juchrL/2/ This is the layout I'd like to achive: even in this page I could align horizontally "FRANK" to "MY MY" nor "CHORUS" to "We're" nor "RiffRaff" to "FrankNFurther" — Emanuele Pesa, Aug 31 '22 at 00:05

Align two columns in the same div horizontally

2 Answers2