CSS Basics - Block-Level-Element: Alignment

Container Alignment - DIV-Container Placement

(All codes listed below works fine with Internet Explorer 5.x / 6 as well)

This snippet will center a div-container:

  div.center {text-align:center;}

  div.center p
  {
    margin-left:auto;
    margin-right:auto;
    padding:4px;
    text-align:left;
    width:60%;
    color:#000000;
    background-color:#FFFFFF;
    border:none;
  }
    

HTML code example:

  <div class="center">
    <p>
      Your content here
    </p>
  </div>
    

To place a box on the right side, use the following:

  div.right {text-align:right;}

  div.right p
  {
    margin-left:auto;
    margin-right:0;
    padding:4px;
    text-align:left;
    width:60%;
    color:#000000;
    background-color:#FFFFFF;
    border:none;
  }
    

HTML code example:

  <div class="right">
    <p>
      Your content here
    </p>
  </div>
    

The code below is included only for the sake of completeness:

  div.left {text-align:left;}

  div.left p
  {
    /* left-aligned - default (therefore not really necessary) */
    margin-left:0;
    margin-right:auto;
    padding:4px;
    text-align:left;
    width:60%;
    color:#000000;
    background-color:#FFFFFF;
    border:none;
  }
    

See how it works (have also a look on the source code for details):