Position a variable-height block to the bottom right corner of another element with a dynamic height

Question

Position a variable-height block to the bottom right corner of another element with a dynamic height

Can a block of text with an unknown height be aligned to the bottom right of a parent element with an unknown height, using only CSS? I have tried using flexbox, float, and absolute positioning, but haven't been able to find a solution.

There is an answer on StackOverflow (https://stackoverflow.com/a/18171538/4716464) that seems to work, but it appears to be strange and may have cross-browser compatibility issues.

The answer to "Floating an image to the bottom right with text wrapping around" on StackOverflow (https://stackoverflow.com/questions/19770925/floating-an-image-to-the-bottom-right-with-text-wrapping-around) only partially solves my issue, as the topic starter there has a known inner block size, whereas both the parent and child elements in my case are dynamic in size.

html css

Answer 1

Answer №1

Could this method be suitable for your situation? You could consider hiding the overflow of the parent element if it may end up smaller than the child element to prevent any odd visual effects.

.parent {
  position: relative;
}

.child {
  position: absolute;
  right: 0;
  bottom: 0;
}

UPDATE:

Upon reviewing the issue of text wrapping, I quickly devised a solution in CodePen that utilizes CSS3 multiple column layout to achieve the desired outcome. Feel free to adjust the body size to see the full effect.

Compatibility check indicates that this should work on IE10+ and most mobile browsers. Since you did not specify a particular browser, hopefully this solution meets your requirements.

Additionally, I have employed Autoprefixer in my CodePen example, so remember to manually prefix column-count if it is not included in your build process. For more insights on multi-column layout, refer to this CSS Tricks article.

CodePen Snippet:

<div class="parent">
   ... Text ...
   <div class="child">
     ... Another Text ...
   </div>
</div>

.parent {
  background: red;
  border: 3px solid #000;
  column-count: 2;
}

.child {
  background: orange;
  border: 1px solid black;
}

Answer 2

Could this method be suitable for your situation? You could consider hiding the overflow of the parent element if it may end up smaller than the child element to prevent any odd visual effects.

.parent {
  position: relative;
}

.child {
  position: absolute;
  right: 0;
  bottom: 0;
}

UPDATE:

Upon reviewing the issue of text wrapping, I quickly devised a solution in CodePen that utilizes CSS3 multiple column layout to achieve the desired outcome. Feel free to adjust the body size to see the full effect.

Compatibility check indicates that this should work on IE10+ and most mobile browsers. Since you did not specify a particular browser, hopefully this solution meets your requirements.

Additionally, I have employed Autoprefixer in my CodePen example, so remember to manually prefix column-count if it is not included in your build process. For more insights on multi-column layout, refer to this CSS Tricks article.

CodePen Snippet:

<div class="parent">
   ... Text ...
   <div class="child">
     ... Another Text ...
   </div>
</div>

.parent {
  background: red;
  border: 3px solid #000;
  column-count: 2;
}

.child {
  background: orange;
  border: 1px solid black;
}

Position a variable-height block to the bottom right corner of another element with a dynamic height

Answer №1

Similar questions

Triggering the Bootstrap modal multiple times with each increment

Firefox's keyup event

Autocomplete feature enhanced with the ability to validate and clear out

Using a gogocartojs map in your JavaScript project

Is it possible to adjust an inline CSS style upon clicking a link?

Having trouble with your contact form sending messages?

A more sophisticated approach to button creation, such as utilizing a single HTML element

Exploring through a dynamically generated table containing JSON data

Images of varying sizes aligned at the bottom of cards, organized in rows with pure CSS styling

A space designated for numerous receivers

Tips for resolving div overlap issues when utilizing a customized div within a container-fluid layout (Bootstrap)

Updating ListItemText styles in MUI when active with react-router

Unable to view image stored as a blob

Retrieve the value from an input field when the value is returned from JavaScript

Animate elements with jQuery, moving them from the bottom right corner to the

Positioning bar chart columns and text using CSS

Is there a way to update the Angular component tag after it has been rendered?

Challenges arise with the safari navigation bar within a PWA platform

Guide to implementing a slider in HTML to adjust the size of my canvas brush

The border bottom effect in Hover.css is malfunctioning when used in the Opera browser