first
second










Example of Center-Alignment of Statically Positioned Content

This example only works on Mozilla/Navigator 6, as this is the only browser that currently supports CSS 2 positioning correctly.

The markup in this example is as follows:


<html>
<head>
<title> Example of Absolute Positioning to center-align absolutely
     positioned content </title>
<style>
.both {position: absolute;
       margin-left: auto;
       margin-right: auto;
       left: 0;
       right: 0;
       width: 150px;
       height: 100px;
       background-color: cyan;
       border: 1px solid black; } 

.one  {position: absolute;
       top: 0;
       left:0;
       height: 50px;
       width: 50px;
       background-color: orange; }

.two  {position: absolute;
       top: 0;
       left:100px;
       height: 50px;
       width: 50px;
       background-color: blue; }


</style>

<body>
<div align="center" class="both">
  <div class="one">first</div>
  <div class="two">second</div>
</div>
</body>
</html>