Comments on: The media object saves hundreds of lines of code

By: Thierry Koblentz

Thierry Koblentz — Wed, 01 Jun 2011 22:38:45 +0000

Hi Nicole,

Fwiw, I’d not use the term “clearfix” to describe the styling of these elements. I think for most people “clearfix” is a method that clears floats via hasLayout in IE and via a pseudo-selector in modern browsers.
But such styling does *not* create a block formatting context across the board (only in IE lt 8 ) which is very different than what you do here – where the styling is the same across browsers.

By: Paul Irish

Paul Irish — Tue, 31 May 2011 23:55:37 +0000

Necolas made a nice demo of this technique I wanted to keep a reference to: http://jsfiddle.net/necolas/rZvEF/

By: High Performance CSS code design | Eddie Welker.com

High Performance CSS code design | Eddie Welker.com — Wed, 06 Apr 2011 05:46:52 +0000

[...] frequently on the Facebook site is something she has coined a “Media Block,” which she defines as “an image to the left, with descriptive content to the right.” Simply put, this is [...]

By: Kiko Doran

Kiko Doran — Tue, 04 Jan 2011 05:25:23 +0000

Nicole,
It seems to make more sense to me that the img class is put on the image instead of on the link. It seems more reusable that way because all my images will be images but they won’t all be anchor links.

I’ve messed with it both ways and it seems to work my way just fine but I’m wondering if there is a downside to doing it this way. I will now defer to the master…

Thanks,
Kiko

By: Nicole Sullivan

Nicole Sullivan — Mon, 29 Nov 2010 19:13:53 +0000

@Patrick – I don’t know if there will be an image inside. It could be a sprite which just has a background image on a link or span. So I apply the float and margin to the piece that is always there.

By: Patrick

Patrick — Wed, 17 Nov 2010 00:15:34 +0000

Nicole, what is the benefit of applying the margin and float to the wrapper, instead of simply the image itself?
I tried doing so, and noticed no difference in the layout in any browser.

.media .img {float:left; margin-right: 10px;}
.media .img img{display:block;}

By: Nicole Sullivan

Nicole Sullivan — Thu, 26 Aug 2010 14:20:43 +0000

@Ron Derksen – it gets a new formatting context via mod.css. http://github.com/stubbornella/oocss/blob/master/core/module/mod.css#L10-11

This is the key to it not needing a ton of extra classes for different sized images. I haven’t written about this method of creating a new formatting context (yet!), but you can check out the overflow method in this post: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

By: Ron Derksen

Ron Derksen — Thu, 26 Aug 2010 12:41:00 +0000

Nicole, when the text in the body gets too long, it will wrap below the image. Shouldn’t the .bd element be floated or get a margin to prevent this?

By: Chad Hietala

Chad Hietala — Tue, 24 Aug 2010 17:52:22 +0000

Wow. This is great. I’m in process of turning all my components that have this layout into media objects.

By: Nicole Sullivan

Nicole Sullivan — Thu, 12 Aug 2010 18:10:48 +0000

@Dmitri - I'm glad I helped you catch up on CSS. I can't use first-child because support for it is pretty poor in IE. I would use pseudo classes for table decoration an other purely presentational aspects, but for something essential like this, the fallback isn't reasonable. Support for the child-node selector, ">" is also not great. I can't wait until older browsers get retired, for now, I'm using this selector for decoration only.