Float image to bottom right of text

HTML & CSS
1

It’s only taken me about 25 years but finally managed to float an image to the bottom right of a block of a text (in more than one browser).

The caveat seems to be that the image must be square and a fixed size or the browser seem to forget the height.

Tested in latest Chrome, Firefox, Edge, Safari and IOS and seems to work reasonably well.

It may be useful to someone so I posted it here for posterity :slight_smile:

While I’m here I noticed that there was a relatively new property called initial-letter for the ::first-letter pseudo class that allows for the number of lines spanned to be defined.

::first-letter {
  initial-letter: 5;
}

(The last example in that demo shows me abusing the technique to create a floated background image without using float. As far as I know that’s impossible by any other method that will allow wrapping text.)

Please have a play around and point out any improvements or pitfalls with both the above.

(**NOTE:**There is still the slightly buggy behaviour of floats where text will wrap outside the principal box hence the extra padding. This has always been present in content that wraps floats depending on where the last word wraps.)

5 Likes
2

You so slow!

But about this line:-

height: calc(99% - var(--img-dimensions));

I see what you did there, but what I’m curious about is, you appear to be using a percentage height definition in the calculation, and we all know the caveats about percentage heights. I don’t see any height definition for any parent elements, so how is that working?

I recall seeing a similar “drop-caps” effect years ago using float:left.
This initially had me puzzled to what it does, then it occurred that it doesn’t work in Firefox.

1 Like
3

That’s one of the benefits of grid. :slight_smile:

In order to make equal height elements it needs to keep track of its height and it’s one of the few places you can use height:100% safely on child elements.

You can do the same for flex items using 100% but generally a flex-grow accomplishes the same thing.

1 Like