Floating Images When Using ACSS Content Grid

I am working on a site with many old articles in which the authors were enamored of alignright or alignleft (float) for images. To use float, the display needs to be set to block, so content-grid breaks the floated images’ layout. What to do?

Using Float without Display:Block

Here is an example of trying to float an image when using the content grid.

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.

How to make it work

If you are hell-bent on using float, wrap your paragraph blocks and image in a group, set to block.

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.

As you can see, the image is floated correctly, but you may need to add a class for content-gap.

Preferred Alternatives

Floated images can represent a variety of issues from legibility to accessibility, so why not avoid them altogether? Two readily available options are just to place them inline or use the media text block. I like the media text block because you can take advantage of ACSS and content-grid. This assumes the images help tell the story.

Inline

Media Block with ACSS

content–feature-max

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.

content–feature content–full-safe

This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.

Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.

The advantage of the inline approach is that you can use the built-in lightbox feature without sacrificing alt text or captions.

In WP7, some things seemed to have changed since I first wrote this, and I needed additional code to ensure the spacing between paragraphs and the alignment were correct.

.wp-block-group figure.alignright {
  float: right;
  margin-inline-start: 1rem;
}
.wp-block-group figure.alignleft{
  float: left;
  margin-inline-end: 1rem;
}
.wp-block-media-text__content,.wp-block-group__inner-container {
 & p{
   margin-block-start:1em;
 }
}

.wp-block-group figure.alignright {
  float: right;
  margin-inline-start: 1rem;
}
.wp-block-group figure.alignleft{
  float: left;
  margin-inline-end: 1rem;
}
.wp-block-media-text__content,.wp-block-group__inner-container {
 & p{
   margin-block-start:1em;
 }
}