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

Re: [css3-box] padding: auto

From: Brad Kemper <brad.kemper@gmail.com>
Date: Mon, 16 Jul 2012 18:30:35 -0700
Message-Id: <A5F076CF-2D25-44EF-AE72-3592780FE960@gmail.com>
Cc: www-style list <www-style@w3.org>
To: Lea Verou <leaverou@gmail.com>
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 its 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, whats 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 its 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. 
Received on Tuesday, 17 July 2012 01:31:12 GMT

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