The Media Object pattern is: image thingy on the left, heading and text on the right.
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.
Certainly, we could float the image to the left!
But just floating means you get wrapping. Wrapping might be perfectly fine, or you might not want it.
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.
Or, you could float both sides:
Flexbox makes quick work of it!
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.
The media object could be a two-cell row of a table:
If you wanted to keep non-
markup, it’s still possible to make it behave like a table via
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.
Like in flexbox, we can avoid the image stretching itself out by aligning it to the top with
I’m sure y’all can find about a dozen more ways to do it!
CSS Tricks Go to Source
Author: Chris Coyier
Powered by WPeMatico