<html> <head> <style> div { display: -moz-box; display: -khtml-box; display: box; } div.outer { width: 300px; height: 100px; background-color: red; -moz-box-orient: vertical; -khtml-box-orient: vertical; box-orient: vertical; -moz-box-align: center; -khtml-box-align: center; box-align: center; position: relative; } div.sides { position: absolute; top: 0px; width: 100px; height: 100px; background-color: green; } div.middle { width: 100px; height: 100px; background-color: green; } </style> </head> <body> <p>You should see a 300x100 green rectangle below. If you see any red, the test has failed. This test makes a positioned vertical box with three children. The first and third children are absolutely positioned at the edges of the box. Box-align of center is used to align the second child in the center of the box. </p> <div class="outer"> <div class="sides"></div> <div class="middle"></div> <div class="sides" style="left:200px"></div> </div> </body>