Home > Designing, Others > The Media Object, A Bunch of Ways

The Media Object, A Bunch of Ways

January 28th, 2017 Leave a comment Go to comments

The Media Object pattern is: image thingy on the left, heading and text on the right.

That’s what Nicole Sullivan called it and the name stuck. It’s a pretty simple pattern, but like all things web design, it can be done many ways.

Bootstrap’s version

Let’s take a crack at a lot of those ways. In these demos, I’m not particularly focusing on naming conventions, semantics, or browser support. Just possibilities.

With Floats

Certainly, we could float the image to the left!

See the Pen Media Block #1 by Chris Coyier (@chriscoyier) on CodePen.

But just floating means you get wrapping. Wrapping might be perfectly fine, or you might not want it.

I’d say in the typical media object pattern, there is no wrapping.

To fix that, we could make sure all the text is wrapped in an element, then make sure that element has padding-left equal to the width of the image and any white space between them.

See the Pen Media Block #2 by Chris Coyier (@chriscoyier) on CodePen.

Or, you could float both sides:

See the Pen Media Block #3 by Chris Coyier (@chriscoyier) on CodePen.

With Flexbox

Flexbox makes quick work of it!

See the Pen Media Block #4 by Chris Coyier (@chriscoyier) on CodePen.

Note that we’re allowing the to become a flex item. We used align-items: flex-start; to make sure it doesn’t stretch out to the same height as the text.

With Tables

The media object could be a two-cell row of a table:

See the Pen Media Block #5 by Chris Coyier (@chriscoyier) on CodePen.

If you wanted to keep non-

markup, it’s still possible to make it behave like a table via display: table;:

See the Pen Media Block #6 by Chris Coyier (@chriscoyier) on CodePen.

With Grid

Grid layout allows us to define a set of columns. It’s quite easy to set up the first column to the fixed width we want, and the second column to take up the rest of the space.

See the Pen Media Block #7 by Chris Coyier (@chriscoyier) on CodePen.

Like in flexbox, we can avoid the image stretching itself out by aligning it to the top with align-self: start;.

I’m sure y’all can find about a dozen more ways to do it!

The Media Object, A Bunch of Ways is a post from CSS-Tricks

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.