CODEWITHSUNDEEP
cssoocss
ckuijjer
ckuijjer

Reputation: 13814

Media object & position: absolute

I'm trying to recreate the OOCSS media object in order to show an image next to some text. The media object uses overflow: hidden to create a new block formatting context. This makes sure that the text doesn't wrap around the image.

However when my media object is positioned absolutely Firefox renders the text different from Chrome and Internet Explorer. Firefox seems to base the width of the media box solely on the width of the text instead of both the width of the image and the width of the text.

Chrome and Internet Explorer (imho expected behaviour)

Chrome and Internet Explorer

Firefox

enter image description here

.media:after {
  content: '';
  display: block;
  clear: both;
}

.media .img {
  float: left;
  margin-right: 8px;
}

.media .img img {
  display: block;
}

.media .bd {
  overflow: hidden;
}

See this codepen for the extended example.

I was wondering if anyone knew if there is a workaround for this and perhaps why Firefox renders this differently.

Upvotes: 1

Views: 237

Answers (1)

Matthew
Matthew

Reputation: 222

Absolutely positioned elements are removed from the normal document flow, so they won't fill up 100% of their parent like regular static block level elements. Instead, they rely on their content width or a specified width. Firefox seems to apply the content width a bit differently than Chrome or IE, which is why it appears cut off.

Not sure of your use-case or what browsers you support, but you have a couple options:

  1. Set a width on the absolutely positioned element
  2. If you don't need to support < IE 10 or opera mini, you can use flexbox instead of the media object
  3. If you just don't want the text cut off, you can use the newer OOCSS method for media objects which uses display: table-cell for media body. This has the caveat that your media object basically take up as much room as it can since it behaves like a table cell, which may not be what you're after.

Upvotes: 1

Related Questions