W3C home > Mailing lists > Public > www-style@w3.org > March 2013

Re: Holy grail layout using Flexbox

From: Mark <markg85@gmail.com>
Date: Tue, 26 Mar 2013 23:40:22 +0100
Message-ID: <CAPd6JnF9ndhaLBAoW7E1b8vsisfY+Zj33NdSte+4zFK8JQX1HQ@mail.gmail.com>
To: www-style@w3.org
On Tue, Mar 26, 2013 at 11:38 PM, Mark <markg85@gmail.com> wrote:
> Hi,
>
> I'm playing with flexbox under chrome in an attempt to see how easy it
> is to get the "holy grail layout" working. For those that don't know,
> the holy grail layout is (as far as i understand it) a layout with:
> - 1 Header
> - 1 Footer
> - 2 or 3 columns
> By default it shows at 100% if there is too little to bring it at 100%
> once the content is bigger then the 100% it stretches. So the footer
> moves down and the content stretches (the columns).
>
> The HTML/CSS that i made shows is a near perfect holy grail layout.
> However, i seem to be having some magic white space that doesn't seem
> to be going away. While the align-content is set to stretch.. It seems
> to show as if it where set at space-between. So now i'm wondering if
> this issue is in my HTML or if i just found a bug in the webkit
> rendering for the flexbox spec?
>
> You can find the HTML/CSS here: http://jsfiddle.net/nBvVD/
> An image of how it looks when i test it:
> http://ompldr.org/vaHc2aQ/holy_grail_layout_using_flexbox.png
> The browser version i used for that screenshot: Chrome 26.0.1410.43
>
> Cheers,
> Mark

+note The spec i used for reference was: http://www.w3.org/TR/css3-flexbox/
Received on Tuesday, 26 March 2013 22:41:09 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 22:41:10 GMT