Position the image to float at the bottom of the enclosed element

Question

Position the image to float at the bottom of the enclosed element

I have a container with an image that is floated to the right side:

https://i.sstatic.net/eoumM.png

<body style="
    width: 300px;
">
    <img style="
    background: red;
    width: 100px;
    height: 150px;
    float: right;
    /* position: relative; */
    /* top: 112px; */
"><h1 style="
    margin: 0;
">Lorem ipsum dolor sit amet
</h1>


    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

</body>

I want to move the image to the end of the container while still having the text wrap around it:

https://i.sstatic.net/tZTKV.png

Is there a way to achieve this without breaking the text wrapping around the image? I've checked similar questions but they seem more focused on using floats for design rather than addressing this specific issue.

html css

Answer 1

Answer №1

Utilize the CSS properties display: table and table-cell, then adjust the vertical alignment to bottom.

.img {
  background: red;
  width: 100px;
  height: 150px;
  float: right;
}

<body style="width: 300px;">
  <div style="display: table">

    <div style="display: table-cell">

<h1>Lorem ipsum dolor sit amet</h1>

      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

    </div>

    <div style="display: table-cell; vertical-align: bottom;">
    
      <img class="img" />
    </div>

  </div>

</body>

Answer 2

Utilize the CSS properties display: table and table-cell, then adjust the vertical alignment to bottom.

.img {
  background: red;
  width: 100px;
  height: 150px;
  float: right;
}

<body style="width: 300px;">
  <div style="display: table">

    <div style="display: table-cell">

<h1>Lorem ipsum dolor sit amet</h1>

      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

    </div>

    <div style="display: table-cell; vertical-align: bottom;">
    
      <img class="img" />
    </div>

  </div>

</body>

Position the image to float at the bottom of the enclosed element

Answer №1

Similar questions

Technique in CSS/SASS to repair a div

Implementing PHP function upon clicking an HTML button

Is there a way to customize the email content for Opencart orders according to our preferences? Can we make changes to it

The Angular service encounters issues when interacting with REST API

Setting up a static directory in Node Express to serve index.html along with additional tsv files

Adjusting the height of table rows in Angular within a Razor cshtml file

Creating consistently sized rows of Bootstrap columns - with either equal heights or equal spacing between each row

The evolution of web development: HTML5's History API meets

Creating an Interactive Countdown Timer with JavaScript

Simplifying the process of importing SCSS files in Angular 5

Alter the color of textbox text using JavaScript

Divs gracefully appear one after the other in a sequential manner

Utilize a personalized container for the slider's thumb within a React application

Can an HTML page be created where certain elements cannot be targeted using CSS selectors or XPaths?

The outcome in my EJS file is not as expected when employing a for loop

Integrating dual Google Maps onto a single HTML page

Creating a torn paper illusion using CSS masking techniques

Generate a custom map by utilizing JavaScript and HTML with data sourced from a database

The image is not appearing on mobile devices, but it is displaying correctly on desktop computers

Understanding the scope of variables in JavaScript when using an anonymous function with addEventListener