1 reply

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

.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>

<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;
}

.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

Vertically aligning a floated element to the bottom of its container

.main_1_aboutUs

.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>

<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;
}

.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;
}

Vertically aligning a floated element to the bottom of its container

Similar Threads

Vertically aligning a floated element to the bottom of its container

Similar Threads

Similar Threads

Similar Threads