all-float demo

Header <h2> Return to Source Ordered Columns

One One One One One One One One One One One One One One One One One One One One One One One One
Test link

Two Two Two Two Two Two
Test link

Three Three Three Three Three
Test link

Clearing Footer (p.clearfooter)

  Minimal HTML for the 'all-float' demo above:

<h2>Header</h2>

   <div class="float-wrapper">

     <div class="first-float">
    <p>One One One One One One One One One</p>
     </div>

     <div class="second-float">
    <p>Two Two Two Two Two Two</p>
     </div>

   </div>

 <div class="third-float">
<p>Three Three Three Three Three</p>
 </div>

<p class="clearfooter">Clearing Footer</p>


  The CSS:

.float-wrapper {float: left; width: 66%;}
     /*** This can be floated left or right ***/

.first-float {float: right; width: 49%;}
     /*** This must be floated opposite 
		to .second-float ***/

.second-float {float: left; width: 49%;}
     /*** This must be floated opposite 
		to .first-float ***/

.third-float {float: right; width: 33%;}
     /*** This must be floated opposite 
		to .float-wrap ***/ 

.clearfooter {clear: both;}

 p {padding: 10px;}