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

[css3-box] padding: auto

From: Lea Verou <leaverou@gmail.com>
Date: Mon, 16 Jul 2012 16:07:31 -0700
Message-Id: <7BA21D42-8B52-47BC-B76B-F03630F46E1B@gmail.com>
To: www-style list <www-style@w3.org>
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

Lea Verou (http://lea.verou.me | @LeaVerou)
Received on Monday, 16 July 2012 23:08:29 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:56 GMT