<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
 <style type="text/css">
  /* set the line height of the line of coloured boxes so we can add them without the layout changing height */
  .buckets { font: 0/0 Arial, sans-serif; }
  
  /* REMOVING THIS RULE CAUSES OTHER BROWSERS TO FAIL LIKE SAFARI */
  :first-child + * .buckets p { display: inline-block; vertical-align: 2em; border: 2em dotted red; padding: 1.0em 1.3em; }
  
  * + * > * > p { margin: 0 0.2em; border: 1px solid ! important; }

  /* sizes for the six buckets */
  #bucket1 { font-size: 20px; }
  #bucket2 { font-size: 24px; }
  #bucket3 { font-size: 28px; }
  #bucket4 { font-size: 32px; }
  #bucket5 { font-size: 36px; }
  #bucket6 { font-size: 40px; }

  /* colours for them */
  .zP { background: black; }
 </style>

 <script type="text/javascript"></script>  <!-- THIS TAG CAUSES THE LAYOUT BADNESS -->
 <body>
  <div class="buckets"
   ><p id="bucket1" class="zP"></p
   ><p id="bucket2" class="zP"></p
   ><p id="bucket3" class="zP"></p
   ><p id="bucket4" class="zP"></p
   ><p id="bucket5" class="zP"></p
   ><p id="bucket6" class="zP"></p>
  </div>
 </body>
</html>