Formatting edit: flattened sections to match the style I settled on for Image Values.

Author: tabatkins

css3-flexbox/Overview.new.src.html

@@ -61,8 +61,10 @@ <h2 class="no-num no-toc" id="table">Table of contents</h2>
 
 <hr>
 
-<div>
-	<h2 id="overview">Overview</h2>
+<!-- ====================================================================== -->
+
+<h2 id="overview">
+Overview</h2>
 
 	<p>CSS 2.1 defined four layout modes, algorithms which determine the size and 
 	position of boxes based on their relationships with their sibling and ancestor 
@@ -110,12 +112,10 @@ <h2 id="overview">Overview</h2>
 		also be this height plus any margins around the buttons.</p>
 	</div>
 
-</div>
-
 <!-- ====================================================================== -->
 
-<div>
-	<h2 id=display-flexbox>New values for 'display' property</h2>
+<h2 id=display-flexbox>
+New values for 'display' property</h2>
 
 	<table class="propdef">
 		<tbody>
@@ -170,12 +170,11 @@ <h2 id=display-flexbox>New values for 'display' property</h2>
 		<li>'vertical-align' has no effect on a flexbox child</li>
 		<li class=issue>[Others?]</li>
 	</ul>
-</div>
 
 <!-- ====================================================================== -->
 
-<div>
-	<h2 id=flex-direction>Flexbox Direction: the 'flex-direction' property</h2>
+<h2 id=flex-direction>
+Flexbox Direction: the 'flex-direction' property</h2>
 
 	<table class=propdef>
 		<tbody>
@@ -264,12 +263,11 @@ <h2 id=flex-direction>Flexbox Direction: the 'flex-direction' property</h2>
 	a horizontal flexbox, or the height in a vertical flexbox.  The <dfn>transverse size</dfn>
 	is the height of the flexbox child in a horizontal flexbox, or the width in a
 	vertical flexbox.</p>
-</div>
 
 <!-- ====================================================================== -->
 
-<div>
-	<h2 id=flex-order>Display Order: the 'flex-order' property</h2>
+<h2 id=flex-order>
+Display Order: the 'flex-order' property</h2>
 
 	<p>Flexbox children are, by default, displayed and laid out in the same order
 	as they appear in the source document.  The 'flex-order' property may be used
@@ -332,12 +330,11 @@ <h2 id=flex-order>Display Order: the 'flex-order' property</h2>
 
 		<pre><code>span2 span4 span1 span3</code></pre>
 	</div>
-</div>
 
 <!-- ====================================================================== -->
 
-<div>
-	<h2 id=flexibility>Flexibility</h2>
+<h2 id=flexibility>
+Flexibility</h2>
 
 	<p>The defining aspect of Flexbox Layout is the ability to make various lengths
 	of the flexbox children flexible.  Flexible lengths can be used for the 'width',
@@ -417,12 +414,12 @@ <h3 id=flex-function>The ''flex()'' function</h3>
 		<p class=issue>TODO: Yank some examples from my original blog post and/or
 		the HTML5ROCKS article.</p>
 	</div>
-</div>
 
 <!-- ====================================================================== -->
 
-<div>
-	<h2 id=flex-pack>The 'flex-pack' property</h2>
+<h2 id=flex-pack>
+The 'flex-pack' property</h2>
+
 	<table class=propdef>
 		<tr>
 			<th>Name:
@@ -485,7 +482,6 @@ <h2 id=flex-pack>The 'flex-pack' property</h2>
 	<div class=example>
 		<p class=issue>TODO: Examples showing the four values.</p>
 	</div>
-</div>
 
 <!-- ====================================================================== -->
 <!-- Aborted new introduction to flexboxes
@@ -531,8 +527,8 @@ <h2 id=flex-pack>The 'flex-pack' property</h2>
 -->
 <!-- ====================================================================== -->
 
-<div>
-	<h2 id=flex-align>The 'flex-align' property</h2>
+<h2 id=flex-align>
+The 'flex-align' property</h2>
 
 	<table class=propdef>
 		<tr>
@@ -583,22 +579,21 @@ <h2 id=flex-align>The 'flex-align' property</h2>
 
 	<p>The precise effects that 'flex-align' has on alignment and free space
 	distribution are detailed in a later chapter.</p>
-</div>
 
 <!-- ====================================================================== -->
 
-<div>
-	<h2 id=free-space-algorithm>Free Space Calculation and Distribution</h2>
+<h2 id=free-space-algorithm>
+Free Space Calculation and Distribution</h2>
 
 	<p class="issue">TODO: to be completed.  I've done it <a href="http://www.xanthir.com/blog/b45o0">once before</a>, I just need
 	to make the necessary modifications to accomodate the differences here, once we've
 	decided on what changes to make.</p>
-</div>
 
 <!-- ====================================================================== -->
 
-<div>
-  <h2 id="inlinesAndBlocks">Relationship to Inlines and blocks</h2>
+<h2 id="inlinesAndBlocks">
+Relationship to Inlines and blocks</h2>
+
 	<div class=issue>
 		<p>This section seems necessary, but not the precise way it's written.  I
 		need to identify precisely what data needs to be exposed both by the containing
@@ -657,7 +652,7 @@ <h2 id="inlinesAndBlocks">Relationship to Inlines and blocks</h2>
      box.
   </p>
 	-->
-</div>
+
 
 
   <hr title="Separator from footer">