meyerweb · August 1, 2013 16:31
diff --git a/dabblet.css b/dabblet.css
 section {margin: 2em 0; border: 2px dotted red;}
 section div:first-child {background: silver;}
 section div:last-child {background: cyan;}


 section#flexbox {display: flex;}
 section#flexbox div {flex: auto; width: auto;}


 section#display {display: table;}
 section#display div {display: table-cell;}
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->

 <section id="flexbox">
 <div>This is a div.</div>
 <div><ul><li>This is…</li><li>…another div with…</li><li>…a list.</li></ul></div>
 </section>

 <section id="display">
 <div>This is a div.</div>
 <div><ul><li>This is…</li><li>…another div with…</li><li>…a list.</li></ul></div>
 </section>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	section {margin: 2em 0; border: 2px dotted red;}
	section div:first-child {background: silver;}
	section div:last-child {background: cyan;}


	section#flexbox {display: flex;}
	section#flexbox div {flex: auto; width: auto;}


	section#display {display: table;}
	section#display div {display: table-cell;}
	<!-- content to be placed inside <body>…</body> -->

	<section id="flexbox">
	<div>This is a div.</div>
	<div><ul><li>This is…</li><li>…another div with…</li><li>…a list.</li></ul></div>
	</section>

	<section id="display">
	<div>This is a div.</div>
	<div><ul><li>This is…</li><li>…another div with…</li><li>…a list.</li></ul></div>
	</section>