012.html [plain text]

<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>