Search code examples
htmlcssimageimage-resizingimage-size

images are not aligning correctly

I have two full width images side by side on one of my pages. They work perfectly except for the fact that they do not align on the bottom (you see how the right picture is slightly higher then the left picture). Is there a way to fix this?

enter image description here

html

<div class="food-featured-posts">

  <div class="food-featured-posts-first">
    <?php query_posts( 'p=185'); while (have_posts()): the_post(); ?>
      <div class="food-wrapper"><?php the_post_thumbnail(); ?>
          <div class="popular-sticker">Popular</div></div>
      <div class="food-featured-posts-info">
      <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <?php get_template_part( 'share-buttons' ); ?>
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
      </div></div>

  <?php endwhile; ?>


  <div class="food-featured-posts-second">
    <?php query_posts( 'p=173'); while (have_posts()): the_post(); ?>
      <div class="food-wrapper"><?php the_post_thumbnail(); ?>
          <div class="popular-sticker">Popular</div></div>
      <div class="food-featured-posts-info">
      <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <?php get_template_part( 'share-buttons' ); ?>
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
      </div></div>
  <?php endwhile; ?>

</div>

css

.food-featured-posts-first img {
  width: 100%;
    height:auto;
}
.food-featured-posts-second img {
  width: 100%;
    height:auto;
}
.food-featured-posts-first  {
  width: 50%;
}
.food-featured-posts-second  {
  width: 50%;
}
.food-featured-posts {
    display: flex;
    margin-bottom: 200px;
    margin-top:125px;
}

fiddle with img tags used instead - https://jsfiddle.net/v90pug4o/4/

Solution

  • The standard way to set vertical align of the items inside a flex is to use align-self as below:

    align-self: flex-start; /* vertical align = top */
align-self: flex-end;   /* vertical align = bottom */

    so your problem in fiddle can be fixed easily by adding align-self: flex-end; to child divs .food-featured-posts-first and .food-featured-posts-second as this:

    .food-featured-posts-first  {
  width: 50%;
  align-self: flex-end;
}

.food-featured-posts-second  {
  width: 50%;
  align-self: flex-end;
}

    enter image description here i'have tested it and it works properly. see this fiddle