Cannot get two sections next to each other in CSS

Question

So, I'm working on the Tribute Page challenge for FCC but cannot properly get two sections next to each other without unnecessary space. I have tried float: left/right; as well as display: inline(-block);. I am trying to have the text of both sections on the same hight (pleas see the screenshot attached). Any insights or help would be greatly appreciated.

Screenshot Tribute Page

#p-1 {
  background: #DFAA00;
  margin-right: 70%;
  margin-left: 30px;
  float: left;
  padding: 0px 20px;
}

#p-2 {
  background: #DFAA00;
  margin-right: 30px;
  margin-left: 35%;
  padding: 0px 20px;
}

  <section id="tribute-info">
    
    <section id="p-1">
    <h3>Cassius Clay or Muhammad Ali?</h3>
      <p> Muhammad Ali is a name familiar to most, but has not always been. Born as Cassius Marcellus Clay, young Cassius soon got into boxing and won the 1960's Olympic Games six years after his amateur debut. Winning the Olympics propelled him into professional boxing. Four years later, Cassius squared off against the reigning Heavyweight champion and defeated him against all odds making him the youngest boxer ever to take the title from a reigning heavyweight champion. Having followed the Nation of Islam for a while, Cassius Clay changed his name into Cassius X which became Muhammad Ali after converting to Islam. </p>
    </section>
    
    <section id="p-2">
    <h3> The Statement that Shaped his Legacy </h3>
      <p> On April 28, 1967, Ali stood up for his beliefs by refusing to step forward during his scheduled induction into the US armed forces for the Vietnam War. This action cost Ali his 'prime' boxing years but engraved his name in the history books. To quote Ali:</p>
        <p id="quote">
        “Why should they ask me to put on a uniform and go 10,000 miles from home and drop bombs and bullets on Brown people in Vietnam while so-called Negro people in Louisville are treated like dogs and denied simple human rights? No I’m not going 10,000 miles from home to help murder and burn another poor nation simply to continue the domination of white slave masters of the darker people the world over. This is the day when such evils must come to an end. I have been warned that to take such a stand would cost me millions of dollars. But I have said it once and I will say it again. The real enemy of my people is here. I will not disgrace my religion, my people or myself by becoming a tool to enslave those who are fighting for their own justice, freedom and equality. If I thought the war was going to bring freedom and equality to 22 million of my people they wouldn’t have to draft me, I’d join tomorrow. I have nothing to lose by standing up for my beliefs. So I’ll go to jail, so what? We’ve been in jail for 400 years.”</p>
      </section>
    
          </section>

Thanks for the insights! Display:flex; solved the problem. – Pazvgelder Apr 05 '20 at 15:35 — Pazvgelder, Apr 05 '20 at 15:35

score -1 · Accepted Answer · answered Apr 05 '20 at 15:27

use flex instead:

#tribute-info {
  display: flex;
  flex-direction: row;
  width: 100%;
}

#p-1 {
  background: #DFAA00;
  width: 40%; /* Define your own width for left */
  margin: 10px;
}

#p-2 {
  background: #DFAA00;
  width: 50%; /* Define your own width for right */
  margin: 10px;
}

<section id="tribute-info">

  <section id="p-1">
    <h3>Cassius Clay or Muhammad Ali?</h3>
    <p> Muhammad Ali is a name familiar to most, but has not always been. Born as Cassius Marcellus Clay, young Cassius soon got into boxing and won the 1960's Olympic Games six years after his amateur debut. Winning the Olympics propelled him into professional
      boxing. Four years later, Cassius squared off against the reigning Heavyweight champion and defeated him against all odds making him the youngest boxer ever to take the title from a reigning heavyweight champion. Having followed the Nation of Islam
      for a while, Cassius Clay changed his name into Cassius X which became Muhammad Ali after converting to Islam. </p>
  </section>

  <section id="p-2">
    <h3> The Statement that Shaped his Legacy </h3>
    <p> On April 28, 1967, Ali stood up for his beliefs by refusing to step forward during his scheduled induction into the US armed forces for the Vietnam War. This action cost Ali his 'prime' boxing years but engraved his name in the history books. To quote
      Ali:</p>
    <p id="quote">
      “Why should they ask me to put on a uniform and go 10,000 miles from home and drop bombs and bullets on Brown people in Vietnam while so-called Negro people in Louisville are treated like dogs and denied simple human rights? No I’m not going 10,000 miles
      from home to help murder and burn another poor nation simply to continue the domination of white slave masters of the darker people the world over. This is the day when such evils must come to an end. I have been warned that to take such a stand
      would cost me millions of dollars. But I have said it once and I will say it again. The real enemy of my people is here. I will not disgrace my religion, my people or myself by becoming a tool to enslave those who are fighting for their own justice,
      freedom and equality. If I thought the war was going to bring freedom and equality to 22 million of my people they wouldn’t have to draft me, I’d join tomorrow. I have nothing to lose by standing up for my beliefs. So I’ll go to jail, so what? We’ve
      been in jail for 400 years.”</p>
  </section>

</section>

Cannot get two sections next to each other in CSS

1 Answers1