stephenhay · September 6, 2011 18:09
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="utf-8">

        <title>Pearce's Flexbox Snaking Cell Dilemma</title>
        <style media="screen">
            body { font: 100%/1.5 sans-serif; padding: 0 2em;}
            .block { 
                background-color: silver;
                margin: 5px;
                padding: 5px;
                min-width: 90px;
                min-height: 90px;
            }
            .horz, .vert { 
                display: -webkit-box;
                display: box;
            }
            .horz { 
                -webkit-box-orient: horizontal;
                box-orient: horizontal;
            }
            .vert { 
                -webkit-box-orient: vertical; 
                box-orient: vertical; 
            }

            #a { position: absolute; width: 200px; }
            #b { 
                -webkit-box-flex: 2; 
                box-flex: 2; 
            }
            #b, #c { margin-top: 115px; }

            #expl { margin-left: 360px; float: right;}

        </style>

    </head>
    <body>
        <h1>Pearce's Snaking Cell Dilemma</h1>
        <div id="expl">
            <p>This can easily be done with a table (I know, <strong>avoid</strong>), but also by positioning and it will also be possible with CSS3 Grid or Template Layout. Can't see any way to do it with Flexbox, though, unless at least one of the “cells” is positioned. This is <em>just awful</em>, and is similarly inferior as tables for page layout. Tables are actually <em>easier</em>. The markup even looks like a table. Please read Tab Atkins‘ post on why <a href="http://www.xanthir.com/blog/b4580">the template approach is better than this</a>.</p>
            <p>Here, I'm using flexbox for the layout, and absolutely positioning cell “A”.</p>
            <p>This experiment is based on a discussion between James Pearce and I about his <a href="https://github.com/jamesgpearce/foxjs">fox.js</a>.</p>
            <p>Demo only works in webkit browsers.</p>
        </div>

        <div class="horz">
            <div class="vert">
                <div class="block" id="a">A</div>
                <div class="block" id="b">B</div>
            </div>
            <div class="vert">
                <div class="horz">
                    <div class="block" id="c">C</div>
                    <div class="block" id="d">D</div>
                </div>
                <div class="block">E</div>
            </div>
        </div>
    </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>Pearce's Flexbox Snaking Cell Dilemma</title>
	<style media="screen">
	body { font: 100%/1.5 sans-serif; padding: 0 2em;}
	.block {
	background-color: silver;
	margin: 5px;
	padding: 5px;
	min-width: 90px;
	min-height: 90px;
	}
	.horz, .vert {
	display: -webkit-box;
	display: box;
	}
	.horz {
	-webkit-box-orient: horizontal;
	box-orient: horizontal;
	}
	.vert {
	-webkit-box-orient: vertical;
	box-orient: vertical;
	}

	#a { position: absolute; width: 200px; }
	#b {
	-webkit-box-flex: 2;
	box-flex: 2;
	}
	#b, #c { margin-top: 115px; }

	#expl { margin-left: 360px; float: right;}

	</style>

	</head>
	<body>
	<h1>Pearce's Snaking Cell Dilemma</h1>
	<div id="expl">
	<p>This can easily be done with a table (I know, <strong>avoid</strong>), but also by positioning and it will also be possible with CSS3 Grid or Template Layout. Can't see any way to do it with Flexbox, though, unless at least one of the “cells” is positioned. This is <em>just awful</em>, and is similarly inferior as tables for page layout. Tables are actually <em>easier</em>. The markup even looks like a table. Please read Tab Atkins‘ post on why <a href="http://www.xanthir.com/blog/b4580">the template approach is better than this</a>.</p>
	<p>Here, I'm using flexbox for the layout, and absolutely positioning cell “A”.</p>
	<p>This experiment is based on a discussion between James Pearce and I about his <a href="https://github.com/jamesgpearce/foxjs">fox.js</a>.</p>
	<p>Demo only works in webkit browsers.</p>
	</div>

	<div class="horz">
	<div class="vert">
	<div class="block" id="a">A</div>
	<div class="block" id="b">B</div>
	</div>
	<div class="vert">
	<div class="horz">
	<div class="block" id="c">C</div>
	<div class="block" id="d">D</div>
	</div>
	<div class="block">E</div>
	</div>
	</div>
	</body>
	</html>