W3C home > Mailing lists > Public > www-style@w3.org > July 2012

Re: [css3-box] padding: auto

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 16 Jul 2012 16:15:24 -0700
Message-ID: <CAAWBYDC1RzJrhGQWn5eB5VedtH3OENd-FEk8_iztK+7WP9ezCg@mail.gmail.com>
To: Lea Verou <leaverou@gmail.com>
Cc: www-style list <www-style@w3.org>
On Mon, Jul 16, 2012 at 4:07 PM, Lea Verou <leaverou@gmail.com> wrote:
> A common visual design pattern that has emerged in the past few years is the
> content area having a fixed width, with the background extending to cover
> the entire viewport width. Here is a quick list of websites doing this:
> http://lesscss.org/
> http://www.opera.com/
> http://www.mozilla.org/
> http://www.kaleidoscopeapp.com/
> http://daneden.me/type/
> http://www.alfredapp.com/
> http://grabaperch.com/
> http://twostepmedia.co.uk/jsquery/
> http://whiteboard.is/
> For given viewport dimensions, this could be done by adjusting the left &
> right padding to be equal to (viewport width - width) / 2. However,
> viewports are not fixed, and therefore authors almost always resort to using
> a wrapper element for the content, with fixed dimensions and margin: auto,
> and assign the background to its parent element. calc() enables this to be
> expressed in pure CSS with something along the lines of:
> width: 20em;
> padding: calc(50vw - 20em / 2);
> This is certainly an improvement, but still suboptimal. Not only it’s not
> very readable, but the width needs to be duplicated or assigned to a
> variable to keep the code DRY. Given that this is not an isolated case, but
> an incredibly common pattern, I believe it should be addressed by something
> more straightforward.
> Basically, what’s needed is an `auto` value for padding, that makes it
> behave as `auto` does for margin. In the latest ED there *is* a new `auto`
> value allowed for the padding properties [1], but the way it’s supposed to
> work is not explained anywhere.
> [1]: http://dev.w3.org/csswg/css3-box/#the-padding-properties

An alternative way to do this would be to have a way to opt-in to
<body>'s special handling, where its background gets hoisted to the
canvas.  That's how you achieve this effect when you're not varying
the background within the page.

Received on Monday, 16 July 2012 23:16:11 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 11 February 2015 12:35:12 UTC