Web/CSS/Layout cookbook/Media objects

The Media Object is a pattern we see all over the web. Named by Nicole Sullivan it refers to a two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.

[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2018/07/27/16112/5b2a8352722a01bcaf3a7e76cd6a25af/media-object.png]]

Requirements

Media Object pattern needs some or all of the following characteristics:

Stacked on Mobile, two columns on Desktop.
The image can be on the left or right.
The image might be small or large.
Media Objects can be nested.
The Media Object should clear the contents no matter which side is tallest.

The recipe

Download this example

Choices made

I have chosen to use Grid Layout for the media object as it allows me to control the layout in two dimensions when I need to. This means that when we have a footer, with short content above, the footer can be pushed down to the bottom of the media object.

Another reason to use Grid Layout is in order that I can use fit-content() for the track sizing of the image. By using fit-content with a maximum size of 200 pixels, when we have a small image such as the icon, the track only gets as large as the size of that image — the max-content size. If the image is larger, the track stops growing at 200 pixels and as the image has a max-width of 100% applied, it scales down so that it continues to fit inside the column.

By using grid-template-areas to achieve the layout, I can see the pattern in the CSS. I define my grid once we have a max-width of 500 pixels, so on smaller devices the media object stacks.

An option for the pattern is to flip it to switch the image to the other side — this is done by adding the media-flip class, which defines a flipped grid template causing the layout to be mirrored.

When we nest one media object inside another we need to place it into the second track in the regular layout, and the first track when flipped.

Fallbacks

There are a number of possible fallbacks for this pattern, depending on the browsers you wish to support. A good catch-all would be to float the image left, and to add a clearfix to the box to ensure that it contained the floats.

Download this example

Once floated elements become grid items the float no longer applies so you don’t need to do anything special to clear the float.

What you will need to do is remove any margins applied to the item, and any widths which we don’t need in a grid context (we have the gap property to control it in grids, and the track takes control of the sizing).

Relevant resources on MDN

Browser compatibility

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

grid-template-areas

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`grid-template-areas`	Chrome Full support 57 Full support 57 Full support 29 Disabled' Disabled' From version 29: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support 16	Firefox Full support 52 Full support 52 No support 40 — 59 Disabled' Disabled' From version 40 until version 59 (exclusive): this feature is behind the `layout.css.grid.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 44 Full support 44 Full support 28 Disabled' Disabled' From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57 Full support 57 Full support 29 Disabled' Disabled' From version 29: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android Full support 52 Full support 52 No support 40 — 59 Disabled' Disabled' From version 40 until version 59 (exclusive): this feature is behind the `layout.css.grid.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 43 Full support 43 Full support 28 Disabled' Disabled' From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0

Legend

Full support: Full support
No support: No support
User must explicitly enable this feature.': User must explicitly enable this feature.

float

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`float`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 7	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
Flow-relative values `inline-start` and `inline-end`	Chrome No support No	Edge No support No	Firefox Full support 55	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 55	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support

Recipe: Media objects by Mozilla Contributors is licensed under CC-BY-SA 2.5.