Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
1 reply
thethingisback

Vertically aligning a floated element to the bottom of its container

I have the <img/> element floated right, and the text is wrapping as I want. But now the image wants to remain at the top. I want the image to always be aligned vertically to the bottom of the container (.main_1_aboutUs)

Is there any possible way to also get the img to also align to the bottom of the container in addition to being floated?

Position absolute w/ 'bottom: 0' ruins the float, as would making the container display:flex or grid.

Here's the HTML starting with the parent (.main_1_aboutUs):

<div className="main_1_aboutUs clearfix">
    <h2 className="aboutUs_title">
      {" "}
      At <span className="highlight_yellow">GoWithGIG</span>, we're more
      than just a rental service - we're your{" "}
      <span className="highlight_yellow">trusted travel companion</span>
    </h2>
    <img
      src={aboutUsImg6}
      className="aboutUs_img"
      id="ladyImg"
      alt="wistful_woman_img"
    />
    <p className="aboutUs_para  ">
     //para text
    </p>
  </div>


CSS:
.aboutUs_img {
  border:1px solid green;
  margin-bottom:0;
  max-width: 100%;
  float:right;
  shape-outside: url('images/aboutUs_img_cropped6.webp');
  shape-margin: 1rem;
}
Screenshot_2023-11-10_at_12.19.47_PM.png
Was this page helpful?