Re: [css3-box] padding: auto

On 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
> 
> Lea Verou (http://lea.verou.me | @LeaVerou)

HTML already has two elements per page to work with, so that you can acheive that effect with something like this:

<style> 
html { 
    background: -webkit-linear-gradient(black,white);
    /* or whatever */ 
    min-height: 100%;
} 
body { 
    background:white; 
    border:1px solid red; 
    margin:10 auto; 
    max-width: 40em; 
    min-height:30em;
} 
</style>

I don't know why the auto margins don't seem to work in standards mode. At least, not in webkit. It does work in quirks mode quite well.