CODEWITHSUNDEEP
cssalignment
FHS
FHS

Reputation: 1

Align table-cells in a table

Sorry for the dumb question, but I'm pretty new to CSS. I'm trying to align two elements side to side with display: table.

However, the element on the right is inexplicably (for me) more on the bottom than the one on the left.

.container {
  content: "";
  display: table;
  clear: both;
  margin-left: 10%;
  margin: 0 auto;
  /* width: auto;
        height: auto; */
  vertical-align: middle;
  border-radius: 5px;
  border: 5px solid #ff656c;
  height: auto;
  padding: 0 20px;
  width: inherit;
}

#column1 {
  display: table-cell;
}

#column2 {
  display: table-cell;
  width: 50%;
}

#scope {
  width: 100%;
  padding-right: 5px;
}
<div class="container">
  <div id="column1">
    <img id="scope" src="https://cdn.pixabay.com/photo/2018/07/08/19/59/blood-pressure-3524615_960_720.jpg">
  </div>
  <div id="column2">
    <h2>Welcome to PATHFINDER</h2>
    <p>For people with heart failure, GPs are crucial in initiating and optimising dosages of recommended medications
    </p>
    <p>The National Heart Foundation of Australia and the Cardiac Society of Australia and New Zealand published guidelines that outline the goal of pharmacological therapy for persons with heart failure with reduced ejection fraction (HFrEF), and how to
      up-titrate these medicines.</p>
    <p>PATHFINDER aims to provide assistance to GPs to identify the most appropriate medicines and dosages for each patient</p>
  </div>
</div>

I tried using the same code that I used for a form that I put in two columns, as well as seeing if there was any problems within the box model, but I really can't wrap my head around this..

Any help is much appreciated!

Upvotes: 0

Views: 35

Answers (1)

Spyr0
Spyr0

Reputation: 233

I would recommend you use flex

But if you want to keep it your way you can add vertical-align: top or vertical-align: middle propertie to your column2 ID

Upvotes: 1

Related Questions