Aligning the bottom of two sections side by side

[Luís Henriques]

Hello everyone,
Today I was trying to implement two sections side by side (I’ve used the article tag though) however because on the left section there is text and on the other section there is only an image, the bottoms of both sections don’t align.

I know it has to do with the text adding it’s own spacing on the already stablished padding.

If anyone could give me some insight on this situation it would be greatly appreciated, I really can’t find a solution to this…

Here is the code:

HTML

 <section id="intro">
  <article class="intro_info">
      <h1>Lorem Ipsum</h1>
      <p>At vero <br> eos et accusamus et iusto odio       dignissimos ducimus qui blanditiis praesentium       voluptatum deleniti atque corrupti quos             dolores<p>
  </article>
  <article class="intro_img">
  </article>
 </section>

-CSS
article.intro_info {
padding: 30px 0 17% 0;
background: -webkit-linear-gradient(left, #4a9339 0%,#7fbc55 100%);
width: 50%;
float: left;
padding-left: 10px;
}

article.intro_img {
padding: 30px 0 17% 0;
background-image: url(‘https://res.cloudinary.com/dbssny2ox/image/upload/v1532076139/hardlevel_descr_zxs50o.jpg’);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 50%;
float: left;
}
article.intro_info h1{
font-family: “Lato”;
font-size: 36px;
color: #fff;
letter-spacing: 2px;
content: ”;
width: 35px;
padding-bottom: 10px;
border-bottom: 3px solid #fff;
margin-bottom: 20px;
left: 0px;
}

article.intro_info p{
font-family: “Lato”;
font-size: 20px;
color: #fff;
}
“`

[Pogany]

Hi,
It’s the padding-left: 10px for the article.intro_info, wich means that the article.intro_infois 10px wider than the article.intro_img.
A solution would be to add box-sizing:border-box; for both articles, for example like this:
https://codepen.io/giaco/pen/gjLqRZ?editors=1100

[Luís Henriques]

Thank you for the help, it is a greater way to display the content! But the problem still persists, the bottoms of both sections don’t match since the section with the text is still bigger than the other one with the image :\

[Beverleyh]

Try flexbox – make section a flex container https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Luís Henriques]

Beverleyh
Thank you so much it worked like a charm!

Pogany
Your help was also greatly apreciated :D

[Author]

Posts