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

Re: Holy grail layout using Flexbox

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 27 Mar 2013 08:29:27 -0700
Message-ID: <CAAWBYDCAcVU9_wQJ2oq2Awzy3YxbeF95YAzxqmnET-VxUfpUSg@mail.gmail.com>
To: Mark <markg85@gmail.com>
Cc: fantasai <fantasai.lists@inkedblade.net>, www-style list <www-style@w3.org>
On Wed, Mar 27, 2013 at 1:14 AM, Mark <markg85@gmail.com> wrote:
> @Tab atkins
> Your solution works. However, the <nav> element (which should show
> before the <div id="content"> element is completely gone in your
> solution. Is there a way to get that one showing again? If that would
> be possible then your solution is perfect i guess.

Sorry, I was giving example code, not copying your precise markup.
Obviously, you'd put the <nav> in your current page structure in place
of the <aside> in my example code.

> @fantasai
> I haven't tried your solution because it involves making a wrapper
> div. I think wrapper divs should not be needed anymore in todays
> bleeding edge CSS3. I know that doing something like:
> <header></header>
> <div id="wrapper">
>   <div id="col1"></div>
> </div>
> <footer></footer>
> would probably work just fine because <div id="wrapper"> would in fact
> only contain singleline stuff as far as flexbox is concerned. But that
> is - in my opinion - not a neat solution.

You need wrapper <div>s when creating two-dimensional layouts with
Flexbox.  Don't fight it, it's okay.  Grid will solve your problem
better when it's ready (soon).

~TJ
Received on Wednesday, 27 March 2013 15:30:15 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 27 March 2013 15:30:16 UTC