How to Use Containers and Wraps Web Design

Web designers tend to stuff content into HTML "container" elements – <article>, <nav>, and the ubiquitous <div> – and then style and shape those containers. But in some cases, we want the size of the content to determine the dimensions of its container, without imposing values from outside.

Previously, I've talked about min-content, one of the intrinsic CSS keywords that designers can use to create content-first web designs. In this article I'll explore the opposite end of the spectrum: max-content.

Using max-content To Shrink-Wrap Image Groups

Let's say we have a set of thumbnail images in a <header> element:

          <header> 	<img src="valhalla.jpg" alt> 	<img src="beached-viking-ship.jpg" alt> 	<img src="water-maiden.jpg" alt> </header>        

Which will look something like this:

All fine: but what about that space at the end of the container?

The common responsive images solution is to scale the content up, filling the container completely. But what if we could use the opposite approach: reducing the size of the container to perfectly contain the natural size of the images? We could do this by adding up the widths of each image and make that total the fixed width of the <header>, but that is slow, laborious, and difficult to change, as well as being non-responsive.

Instead, we'll use max-content:

          header { 	margin: 0; 	width: max-content;  	border: 4px solid black;  }        

Which, after adding the vendor prefixed versions, results in what you can see at the top of this article.

That's a much better result. Common alternatives are to use display: inline-block, display: table-cell or float on the container, but both have serious implications as to how other page content is laid out; width: max-content only affects the width of the element.

Perhaps the easiest way to remember what max-content does is that it answers the question "how small can I make this container without breaking any lines?", aptly demonstrated in the next example.

Using max-content to control caption text

A good way to distinguish min-content and max-content is that the former will happily break text across multiple lines until it arrives at something "solid", such as an image, while max-content will never do so:

          <figure> 	<img src="wotan.jpg" alt> 	<figcaption>Wotan, by Konstantin Vasilyev (1942 - 1976)</figcaption> </figure>        

The CSS:

          figure { 	margin: 0; 	width: max-content; 	background-image: linear-gradient(#777, #222, #777); 	padding-top: 15px; } figcaption { 	font-size: 1.4rem; 	margin-top: 1rem; 	background: #ccc; padding: 8px; 	text-align: center; } figure img { 	display: block; 	margin: 0 auto;  }        

Wotan, by Konstantin Vasilyev (1942 – 1976)

The result can be seen in the figure illustration. As you can see, under max-content  the caption text will always take priority, driving across the element in a single line. Of course, you have to be careful, as this locks the <figure> to the width of its unbroken caption text, making the element unresponsive. (For that reason, I've intervened with some @media queries at smaller screen sizes).

On the other hand, max-content becomes an easy way of saying "always make a captioned image as wide as its associated text":

          figure {  	margin: 0; 	width: max-content; } figcaption { 	font-size: 1.4rem; 	margin-top: .4rem;  } figure img { 	width: 100%; 	height: auto; }        

Using max-content responsively

With a little bit of cleverness, we can use max-content in responsive web design:

          figure { 	margin: 0;  	width: 33%; 	max-width: max-content;  	border: 4px solid black; 	padding: .4rem;  }        

This translates as "make <figure> elements 33% of the width of their container, but never wider than the length of their caption text."

Support and oddities

max-content is a part of CSS that has been around since the days of Firefox 4, yet has never quite caught on in popular development. One of the reasons might be the fact that it remains one of the few CSS values to require vendor prefixes:

          max-width: -moz-max-content; max-width: -webkit-max-content; max-width: max-content;        

Undoubtedly another factor is browser support: IE has yet to catch up with intrinsic and extrinsic sizing, although Microsoft claims that keyword support is under consideration for inclusion in Edge. For Internet Explorer and Android, you'd have to use the fallbacks discussed above to achieve the same effects.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.

How to Use Containers and Wraps Web Design

Source: http://thenewcode.com/894/Shrink-Wrap-HTML-containers-with-max-content

Share this post